文章地址: 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 文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title></title> </head> <body> <App></App> <script src="dist/Dll.js"></script> <script src="dist/build.js"></script> </body> </html> 4. 执行 npm run build , 结束, OK!