webpack 项目打包 (build) 速度优化 --- Dll 方式

文章地址: http://blog.csdn.net/byc233518/article/details/74909686

项目打包速度太慢太慢, 实在受不了, 打一次包要十多分钟, 下图中可以看到优化前打包是 752039ms (差不多13分钟)

优化后: 34170ms(半分钟)

优化过程:

1.  项目根目录下添加 webpack.dll.config.js 文件, 其中 vendors 中配置的是我项目中用到的库, 配置在这里, 根据项目自身情况进行配置;

/* eslint-disable */
const path = require('path')
const webpack = require('webpack')

var vendors = [
  'vue',
  'vue-router',
  'vuex',
  'iview',
  'element-ui',
  'localforage',
  'lodash',
  'md5',
  'moment',
  'vue-echarts-v3',
]

module.exports = {
  entry: {
    vendor: vendors
  },
  output: {
    path: path.join(__dirname, "dist"),
    filename: "Dll.js",
    library: "[name]_[hash]"
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, "dist", "manifest.json"),
      name: "[name]_[hash]",
      context: __dirname
    })
  ]
}

2. 项目目录下命令行运行:  $ webpack --config webpack.dll.config.js -p 命令 生成 Dll.js及 manifest.json 文件

    运行后会看到dist 目录下多出个 Dll.js 及 manifest,json 文件

3. 在 index.html 中引入打好包的 Dll.js 文件

4. 执行 npm run build , 
    结束, OK!