详解基于DllPlugin和DllReferencePlugin的webpack构建优化
一个基于vue-cli webpack2模板创建的项目.项目中使用到了vue+vue-router+axios+muse-ui+iview
现在构建一次需要的时间大概是40s左右.真心受不了.虽然在开发过程中,我们不太需要关心构建时间.但是如果在开发hybridApp时,构建的次数就会增多.
一般我们可以把项目分为三部分.
分类
说明
变动频率
vendor_library
核心库
低
vendor
一般项目依赖
中等
code
业务逻辑
高
vendor_library:比如vue,vue-router,axios 这些变动频率极低的文件可以利用 DllPlugin 和 DllReferencePlugin 进行预编译.
vendor,code在开发阶段,每次构建都需要编译.但是一旦完成该次开发任务,应该调整vendor 是否加入vendor_library.
BundleAnalyzerPlugin 的插件使用
BundleAnalyzerPlugin 是分析 Webpack 生成的包体组成并且以可视化的方式反馈给开发者的插件。
vue已经默认集成了该插件. 如果你运行 npm run build –report.就能看到当前项目的依赖情况.然后做出相应调整.
优化方向
按需加载
muse-ui,iview 都提供了按需加载的方式,按照文档调整即可.
分类
耗时
muse-ui
iview
before
13256ms
234KB
337KB
after
43211ms
79KB
75KB
先看结果...你没看错,'优化后',时间竟然变长了..."htmlcode">
//webpack.dll.conf.js
process.env.NODE_ENV = 'production'
const path = require('path');
var utils = require('./utils')
var vueLoaderConfig = require('./vue-loader.conf')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
const webpack = require('webpack');
//vue项目默认有一个static目录.我就把导出目录放在了static/dll/目录下
const srcPath = path.join(__dirname, '../static/dll/');
//需要编译的模块
const vendors = ['vue/dist/vue.esm.js',
'vue-router',
'vue-localstorage',
'material-design-icons/iconfont/material-icons.css',
'iview/dist/styles/iview.css',
'iview/src/components/tag/tag.vue'
'muse-ui/src/appBar'
];
webpackConfig = {
entry: {
vendor: vendors
},
resolve: {
extensions: ['.js', '.vue', '.json']
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /iview.src.*"css-loader"
})
},
{
test: /\.(woff2"htmlcode">
|____dll
| |____fonts
| |____vendor-mainfest.json
| |____vendor.dll.css
| |____vendor.dll.js
修改模板index.html 根据你的构建结果做修改.
//head 标签
<link type="text/css" rel="stylesheet" href="./static/dll/vendor.dll.css" rel="external nofollow" >
//body 标签
<script src="/UploadFiles/2021-04-02/vendor.dll.js">
修改webpack.base.conf.js
plugins: [
...,
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require('../static/dll/vendor-mainfest.json') // 指向生成的json文件
})
]
执行
webpack --config ./build/webpack.dll.conf.js
你也可以将该语句放入npm run 中.'build:dll:report' 是为了优化dll依赖关系,添加的另外一条命令.上文已经提过,我们可以借用BundleAnalyzerPlugin插件查看当前包的依赖情况,和包体组成情况.
//package.json
"scripts":{
"build:dll": "webpack --config ./build/webpack.dll.conf.js",
"build:dll:report": "npm run build:dll --report"
}
npm run build …看看这次的构建时间吧
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：vue使用Element组件时v-for循环里的表单项验证方法