文章地址: 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
- })
- ]
- }
运行后会看到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!