提高 webpack 构建 Vue 项目的速度
提高 webpack 構(gòu)建 Vue 項(xiàng)目的速度
前言
最近有人給我的?Vue2 后臺(tái)管理系統(tǒng)解決方案?提了 issue ，說執(zhí)行 npm run build 構(gòu)建項(xiàng)目的時(shí)候極其慢，然后就引起我的注意了。在項(xiàng)目中，引入了比較多的第三方庫，導(dǎo)致項(xiàng)目大，而每次修改，都不會(huì)去修改到這些庫，構(gòu)建卻都要再打包這些庫，浪費(fèi)了不少時(shí)間。所以，把這些不常變動(dòng)的第三方庫都提取出來，下次 build 的時(shí)候不再構(gòu)建這些庫，這樣既可大大縮短構(gòu)建時(shí)間。那么要怎么去實(shí)現(xiàn)呢？
解決方案
DllPlugin 和 DllReferencePlugin
查找了一下資料，發(fā)現(xiàn)我們可以利用 webpack 的插件 DllPlugin 和 DllReferencePlugin 來實(shí)現(xiàn)我們要的功能。
DllPlugin 可以把我們需要打包的第三方庫打包成一個(gè) js 文件和一個(gè) json 文件，這個(gè) json 文件中會(huì)映射每個(gè)打包的模塊地址和 id，DllReferencePlugin 通過讀取這個(gè)json文件來使用打包的這些模塊。
接下來就看如何實(shí)現(xiàn)。
配置文件
在 build 文件夾中新建 webpack.dll.config.js (項(xiàng)目基于 vue-cli 的)
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 } }) ] };然后在 package.json 中配置命令
"scripts": { ... "build:dll": "webpack --config build/webpack.dll.conf.js" }執(zhí)行 npm run build:dll 命令來生成 vendor.dll.js 和 vendor-manifest.json
需要在 index.html 引入 vendor.dll.js
<body><div id="app"></div> <script src="./static/js/vendor.dll.js"></script> </body>vendor-manifest.json 的內(nèi)容大概如下：
{"name": "vendor_library","content": {"./node_modules/core-js/modules/_export.js": {"id": 0, "meta": {} }, ... }接下來就在 webpack.base.config.js 中通過 DLLReferencePlugin 來使用 DllPlugin 生成的 DLL Bundle
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') }), ] }原先 build 需要 95446ms，配置之后執(zhí)行 build 只需 14360ms，減少了 75% 的時(shí)間。
但是存在一個(gè)問題，當(dāng)把太多的第三方依賴都打包到 vendor.dll.js 中去，該文件太大也會(huì)影響首屏加載時(shí)間。所以要權(quán)衡利弊，可以異步加載的插件就沒有必要打包進(jìn)來了，不要一味的把所有都打包到這里面來獲取構(gòu)建時(shí)的快感。
示例地址：vue-manage-system
個(gè)人博客：lin-xin/blog
轉(zhuǎn)載于:https://www.cnblogs.com/libin-1/p/6667432.html
與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的提高 webpack 构建 Vue 项目的速度的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 转 -----那些年总也记不牢的IO
- 下一篇： vue2.0父向子传参，子向父传参，路由