分析如何提高 webpack 构建 Vue 项目的速度
对此感兴趣的朋友,看看idc笔记做的技术笔记!
前言
最近有
这篇文章主要为大家详细介绍了分析如何提高 webpack 构建 Vue 项目的速度,具有一定的参考价值,可以用来参考一下。
对此感兴趣的朋友,看看idc笔记做的技术笔记!
前言
最近有人给我的 Vue2 后台管理系统解决方案 提了 issue ,说执行 npm run build 构建项目的时候极其慢,然后就引起我的注意了。在项目中,引入了比较多的第三方库,导致项目大,而每次修改,都不会去修改到这些库,构建却都要再打包这些库,浪费了不少时间。所以,把这些不常变动的第三方库都提取出来,下次 build 的时候不再构建这些库,这样既可大大缩短构建时间。那么要怎么去实现呢?
解决方案
DllPlugin 和 DllReferencePlugin
查找了一下资料,发现我们可以利用 webpack 的插件 DllPlugin 和 DllReferencePlugin 来实现我们要的功能。
DllPlugin 可以把我们需要打包的第三方库打包成一个 js 文件和一个 json 文件,这个 json 文件中会映射每个打包的模块地址和 id,DllReferencePlugin 通过读取这个json文件来使用打包的这些模块。
接下来就看如何实现。
配置文件
在 build 文件夹中新建 webpack.dll.config.js (项目基于 vue-cli 的)
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <code> const path = require ( 'path' ); const webpack = require ( 'webpack' ); module.exports = { entry: { vendor: [ 'vue/dist/vue.common.js' , 'vue-router' , 'babel-polyfill' , 'axios' , 'vue-echarts-v3' ] }, output: { path: path.join(__dirname, '../static/js' ), filename: '[name].dll.js' , library: '[name]_library' // vendor.dll.js中暴露出的全局变量名 }, plugins: [ new webpack.DllPlugin({ path: path.join(__dirname, '.' , '[name]-manifest.json' ), name: '[name]_library' }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }) ] }; </code> |
然后在 package.json 中配置命令
代码如下:
1 2 3 4 5 6 7 | <code> "scripts" : { ... "build:dll" : "webpack --config build/webpack.dll.conf.js" } </code> |
执行 npm run build:dll 命令来生成 vendor.dll.js 和 vendor-manifest.json
需要在 index.html 引入 vendor.dll.js
代码如下:
1 2 3 4 5 | <code> <body> <div id= "app" ></div> <script src= "./static/js/vendor.dll.js" ></script> </body></code> |
vendor-manifest.json 的内容大概如下:
代码如下:
1 2 3 4 5 6 7 8 9 10 | <code> { "name" : "vendor_library" , "content" : { "./node_modules/core-js/modules/_export.js" : { "id" : 0, "meta" : {} }, ... }</code> |
接下来就在 webpack.base.config.js 中通过 DLLReferencePlugin 来使用 DllPlugin 生成的 DLL Bundle
代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <code> var webpack = require ( 'webpack' ); module.exports = { entry: { app: [ './src/main.js' ] }, module: { ... } // 添加DllReferencePlugin插件 plugins: [ new webpack.DllReferencePlugin({ context: path.resolve(__dirname, '..' ), manifest: require ( './vendor-manifest.json' ) }), ] } </code> |
原先 build 需要 95446ms,配置之后执行 build 只需 14360ms,减少了 75% 的时间。
但是存在一个问题,当把太多的第三方依赖都打包到 vendor.dll.js 中去,该文件太大也会影响首屏加载时间。所以要权衡利弊,可以异步加载的插件就没有必要打包进来了,不要一味的把所有都打包到这里面来获取构建时的快感。
示例地址:vue-manage-system
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持php教程。
注:关于分析如何提高 webpack 构建 Vue 项目的速度的内容就先介绍到这里,更多相关文章的可以留意