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

Webpack构建速度优化基本优化完毕，接下来考虑的就是：线上代码质量的优化，即如何使用webpack构建出高质量的代码

Webpack构建流程：初始化配置参数 -> 绑定事件钩子回调 -> 确定Entry逐一遍历 -> 使用loader编译文件 -> 输出文件

提纲

本次优化构建代码质量基本技术：

（生产环境代码构建）为实时查看每次配置后代码构建情况，使用Webpack监听文件避免每次手动build，并且开启webpack-jarvis，实时查看构建分析，npm i -D webpack-jarvis。

开启监听模式

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

一、react-router4实现按需加载

单页应用按需加载一般原则：

将网站划分成一个个小功能，在按照每个功能的相关度将他们分成几个类； 将没一个类合并成一个chunk，按需加载对应的代码； 不可将用户首次进入网站时需要看到画面的对应功能Chunk按需加载；

被分割出去的代码的加载需要一定的触发时机，即当用户操作了或者即将操作对应功能时再去加载对应的代码（默认使用react-router按需加载的触发条件是路由的变化）

实现条件：

使用插件：npm i react-loadable;

配合bable插件npm i @babel/plugin-syntax-dynamic-import;

代码示例：

// .bablerc{ "plugins": ["@babel/plugin-syntax-dynamic-import"]}// 示例代码Loadable({ loader: () => import('./component'), //按需加载组件 loading: Loading, //处理组件加载的loading、error等 delay: 300 //延迟加载避免loading的闪烁问题});// Loading组件自定义// 接受三个props，其中pastDelay：等待时触发；timedOut：超时时触发超过delay；error：出错触发默认为200msconst 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;};

二、提取公共代码webpack.optimization

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, //该配置项是设置处理的优先级，数值越大越优先处理     }  }}