前端webpack打包构建优化

随着项目越来越大的时候，会发现不管是从npm run build 、 jenkins 配置构建的时候，还是项目首页初次加载时，耗费的时间也越来越多，达到了3分钟以上，这个时候，我们就需要优化我们的代码了：
（ 持续更新 ）
优化代码可以分为两个部分：

• webpack打包工具优化
• 项目代码优化

一、 webpack打包工具优化

1. 打包构建前期，我们需要安装一个插件来辅助我们做一个全面的评测。

webpack-bundle-analyzer： 它是一个交互式可缩放树映射可视化工具 ，可以以图的方式为我们展现项目中哪些包的方位及所占项目的比例、大小等。
想具体了解的朋友可点击此npm的传送门： https://www.npmjs.com/package/webpack-bundle-analyzer

// 首先来安装它
npm install --save-dev webpack-bundle-analyzer

//  在项目目录 config/prod.env.js 下引入
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// 还是当前目录下,找到plugins配置，加上 new BundleAnalyzerPlugin()，如下 ，同级之间用“，”分隔：
plugins：[
	new BundleAnalyzerPlugin(),
	... ...
]

完成之后，执行 npm run build ,webpack会默认打开一个目录，http://127.0.0.1:8888/ ，如果你电脑上默认的浏览器是IE等，那么需要你把地址copy一下，放到谷歌里看。
效果如下：

就是这张图，在这张图上，我们可以清楚地看到项目中引用了vue、element-UI、fullcalendar.js、quill.js 等大体积的库，那么我们就能有针对性地去优化了。

2. 没有改动的库，我们可以分离打包

// 在 webpack.base.js 文件中，找到 externals,如果没有找到，也可以自己配置，这里就不多说了
  externals: {
    'BaiduMap': 'BMap',
    'vue': 'Vue',
    //'fullcalendar':'FullCalendar',
    'element-ui': 'ELEMENT'
  }
// 在默认的 index.html中，添加已经移除的库
// 可以使用cdn加速
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
// 在 main.ts 中除去：
Vue.use(element)
Vue.use(fullcalendar)

这样的好处就是：第一 可以优化webpack打包构建的速度和体积，第二 cdn本身就会对js加速
但是这里要注意的是：

• vue版本在开发阶段，一定要使用cdn的开发版本，否则在开发的过程中，本该报的错，vue生产版本是不报错的，会导致一些不必要的时间浪费。
• element-UI 的全局变量是 “ELEMENT”，exernals 中各参数对应的是，库默认输出的变量名称，否则不会webpack会找不到这个包，会报未定义。

3.css打包优化：
将webpack官网默认的css打包工具 extract-text-webpack-plugin换成 optimize-css-assets-webpack-plugin
我这里跟官网配的不一样，如果有疑问的，请看npm 官网传，送门： https://www.npmjs.com/package/optimize-css-assets-webpack-plugin

// 安装
npm install --save-dev optimize-css-assets-webpack-plugin
// prod.env.js 中
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// 在当前页找到 minimizer，添加如下代码
minimizer:[
	new OptimizeCSSAssetsPlugin(),
	......
]

4. 更新webpack 及各插件的版本，因为最新的插件版本，会相应的做一些速度优化，这个还是很实用的。

5. babel-loader

1. 在写业务代码时：babel-loader 转换代码时， targets 中可以剔除高版本支持es6的浏览器。并且使用 useBuiltIns:‘usage’，它会让代码中用到的es6规范打包，没有用到的规范不打包。

当然，以下代码中 options 的内容建议写在 .babelrc 文件里，我这里不写了

{
   test: /\.js$/,
   loader: 'babel-loader',
   options:{
     presets:[["@babel/preset-env",{
       targets:{
           chrome:"67"
       },
       useBuiltIns:'usage'
   }]],
    exclude: file => {
     return r = /node_modules/.test(file) && !/\.vue\.js/.test(file) && !/vue-full-calendar(\\|\/)(src)/.test(file)
   }
 },

2. 如果写的是库代码： 要设置plugin-transform-runtime，这样写不会污染全局环境。

同样，options中的内容建议写在 .babelrc 里，我这里就不写了

{
   test: /\.js$/,
   loader: 'babel-loader',
   options:{
     presets:[["@babel/plugin-transform-runtime",{
       "corejs":2,
       "helpers":true,
       "regenerator": true,
       "useESModules":false
   }]],
    exclude: file => {
     return r = /node_modules/.test(file) && !/\.vue\.js/.test(file) && !/vue-full-calendar(\\|\/)(src)/.test(file)
   }
 },

二、项目代码优化

1. 对超过600行的代码进行分割

为什么要这么做呢，因为当一个文件中的代码超过600行的时候，我们要维护的成本会增加，一个文件从头翻到尾地找代码，不符合SOLID设计原则。
而且如果我们有安装 jslint、 tslint 这里代码检查工具，那么在这儿报的错误和警告也会加入webpack的打包成本中，所以打包的时候最好不要有报错或者警告一类的问题。

2. 公共库如非必要，需写在用到的组件中

在main.ts中引用的 vue.use()的公共库，如非大部分页都用到，最好不要写到这里面，vue现在也按需加载了，我们可以在使用到的组件中引入。
3. 如果大家的项目中有用到递归组件

注意：不是递归方法，而是递归组件哦，如果它是用typescript来写的，那么这个递归组件要改回 javascript 来写，因为打包后，会提示找不到递归组件的name值。

4. 清除不必要的svg及样式，以及样式分割

svg格式的文件中，如果有用 glyph 格式来写的，那么相应的会对应在css中，所以如果有没有用到的，建义把 glyph多余的删掉，因为svg打包会用比较长的时间。
样式如果过长的话，建议在当前组件中分离出去。
5. 建议大家可以学一学有关js的算法，看看各算法的时间复杂度和空间复杂度

对循环方法，如果能用一个循环的不要用两个、三个，因为当数据量大的时候，循环方法是会耗费大量的时间，
在向后台请求数据回来时，如非必要，在当前的js中循环，应该放到vue dom中去循环，这样会减少一层循环。
6. html 文件中不要引找不到的js文件