vue-cli3 使用ddlPlugin加块构建速度

根目录下新建webpack.dll.conf.js

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

/**
 * 加快开发时的构建速度
 * 第一次yarn start的时候会构建整个包
 * 以后再构建，会先从ddl中找
 *
 * 当下面这些库版本升级的时候
 * 执行一下 npm run ddl 就可以了
 */
module.exports = {
  entry: {
    vendor: [
      'vue-router/dist/vue-router.esm.js',
      'vuex/dist/vuex.esm.js',
      'axios',
      'vue',
      'element-ui',
      'echarts'
    ]
  },
  output: {
    path: path.join(__dirname, 'public/vendor'),
    filename: '[name].dll.js',
    library: '[name]_[hash]' // vendor.dll.js中暴露出的全局变量名
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'public/vendor', '[name]-manifest.json'),
      name: '[name]_[hash]',
      context: process.cwd()
    })
  ]
}

package.json新增一条命令，要安装webpack-cli
"dll": "webpack --config ./webpack.dll.conf.js"

执行 npm run dll, 会在public中生成vender文件夹
vue.config.js: configureWebpack增加配置

      config.plugins = [
        ...config.plugins,
        new webpack.DllReferencePlugin({
          context: process.cwd(),
          manifest: require('./public/vendor/vendor-manifest.json')
        })
      ]

public 下的index.html引入一下文件, 只在开发环境生效

    <% if (process.env.NODE_ENV === 'development' ) { %>
      <script src="./vendor/vendor.dll.js"></script>
    <% } %>