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

来源：互联网发布：日本人爱干净知乎编辑：程序博客网时间：2024/06/03 13:17

文章地址: 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!

阅读全文

0 0