vue 实践webpack性能优化1:构建速度（缩小文件搜索范围+减少基础模块编译次数）

一、优化构建速度

1.1 缩小文件的搜索范围

以vue项目的默认配置为例：webpack.base,conf.js

module.exports:

extensions :当导入语句没带文件后缀时，Webpack会根据extensions定义的后缀列表进行文件查找

• 数组中的值尽量少
• 频率高的文件类型的后缀写在前面
• 导入语句尽可能的写上文件后缀

alias: 使webpack直接使用库的min文件

 resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },

1.2 Dll Plugin减少基础模块编译次数

原理：用 webpack 的插件 DllPlugin 和 DllReferencePlugin 来实现

把第三方库打包成一个 js 文件，每次构建的时候都调用这个本地被打包好了的js,节省了这部分的时间

值得注意的是，这里打包的js文件不是越多越好，首先，异步的第三方包没有必要，其次，会影响首屏的加载速度

需要记几个做一下均衡

方法：（vue-cli基础上举例的）

1.build 文件中新建webpack.dll.config.js

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    vendor: [
      'vue/dist/vue.esm.js', 'element-ui'] //  这里放你main.js中合适的包
  },
  output: {
    path: path.join(__dirname, '../static/js'),
    filename: '[name].dll.js',
    library: '[name]_library'       // 这里是显示全局变量名
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, '.', '[name]-manifest.json'),
      name: '[name]_library'
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
};

2.package.json中新建一条命令（不新建也可以直接用地址）

"scripts": {
    ...
    "build:dll": "webpack --config build/webpack.dll.conf.js"
}

3. 执行npm run build:dll

它会得出

 vendor.dll.js 和 vendor-manifest.json

4.把打包出来的js引入index.html（注意引入的位置）

5.zai webpack.base.config.js中使用DLLReferencePlugin 

   plugins: [
        new webpack.DllReferencePlugin({
            context: path.resolve(__dirname, '..'),
            manifest: require('./vendor-manifest.json')
        }),
    ]

6.再次打包，来看看结果吧

其中static/js/vendor.[hash].js文件的大小减小了很多，速度也提升了比较多