性能优化篇之Webpack构建代码质量压缩的建议

watch: true,
watchOptions: {
 ignored: /node_modules/, // 忽略监听文件
 aggregateTimeout: 300, //文件变动后多久发起构建
 poll: 1000, //每秒询问次数，越小越好
}

// .bablerc
{
 "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

// 示例代码
Loadable({
 loader: () => import('./component'), //按需加载组件
 loading: Loading, //处理组件加载的loading、error等
 delay: 300 //延迟加载避免loading的闪烁问题
});

// Loading组件自定义
// 接受三个props，其中pastDelay：等待时触发；timedOut：超时时触发超过delay；error：出错触发默认为200ms
const Loading = ({ pastDelay, timedOut, error }) => {
 if (pastDelay) {
 return <Spin spinning tip="Loadding..." ><div style={{height: 300}} /></Spin>
 } else if (timedOut) {
 return <Spin spinning tip="Taking a long time..." ><div style={{height: 300}} /></Spin>
 } else if (error) {
 return <div>Error!</div>;
 }
 return null;
};

optimization: {
 splitChunks: {
 chunks: "all",
 cacheGroups: {
 vendors: { 
 test: /node_modules/,
 name: 'vendors', 
 minSize: 0,
 minChunks: 1, 
 chunks: 'initial',
 priority: 2 // 该配置项是设置处理的优先级，数值越大越优先处理 
 },
 commons: {
 name: "comomns",
 test: resolve("src/components"), // 可自定义拓展规则
 minChunks: 2, // 最小共用次数
 minSize:0, //代码最小多大，进行抽离
 priority: 1, //该配置项是设置处理的优先级，数值越大越优先处理 
 }
 }
}

optimization: {
 minimizer: [
 new ParallelUglifyPlugin({
 cacheDir: '.cache/', //缓存压缩，默认不缓存，设置存放位置开启
 test: /.js$/, //匹配需要压缩的文件，默认为/.js$/和Loader配置一样
 //include: [], 使用正则去选择需要被压缩的文件和Loader配置一样
 //exclude: [], 使用正则去去除不需要被压缩的文件和Loader配置一样
 //workerCount: 2, 开启几个子进程并发执行压缩
 // sourceMap: false, 是否

// 提取css到单独的文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// optimizeCssPlugin CSS文件压缩插件
const optimizeCssPlugin = require('optimize-css-assets-webpack-plugin');

const extractSCSS = new MiniCssExtractPlugin({
 filename: 'css/[name].[contenthash:8].css',
 chunkFilename: 'css/[name]_[contenthash:8].css',
 fallback:'style-loader'
});
...
...
plugins: [
 new optimizeCssPlugin({
 assetNameRegExp: /\.css$/g,
 cssProcessor: require('cssnano'),
 cssProcessorOptions: { discardComments: { removeAll: true } },
 canPrint: true
 }),
]

// JavaScript
output: {
 publicPath: '//js.cdn.com/js/',
 path: path.join(__dirname, '../docs/dist'), // 打包后的文件存放的地方
 // 为

const CompressionPlugin = require("compression-webpack-plugin");

plugins: [
 new CompressionPlugin({
 filename: '[path].gz[query]', //目标资源名称。[file] 会被替换成原资源。[path] 会被替换成原资源路径，[query] 替换成原查询字符串
 algorithm: 'gzip',//算法
 test: /\.(js|css)$/, //压缩 js 与 css
 threshold: 10240,//只处理比这个值大的资源。按字节计算
 minRatio: 0.8//只有压缩率比这个值小的资源才会被处理
 })
]

const staticCache = require('koa-static-cache');
import config from './configs';

const app = new Koa();

app.use(staticCache(path.resolve(__dirname, "../dist"), {
 maxAge: 7 * 24 * 60 * 60,
 gzip: true, //开启
 dynamic: true,
}))

{
 "presets": [
 ["env", {
 "modules": false
 }]
 ],
 "plugins": ["syntax-dynamic-import"]
}

const ModuleConcatPlugin = require('webpack/lib/optimize/ModuleConcatenationPlugin');
plugins: [
 new ModuleConcatPlugin(), //开启scope Hoisting
 ],