vue项目打包骚操作(Dll优化)
1、dll优化原理:每次打包都会处理所有的内容,但是并不更改第三方包(vue/jquery/axios等等),那么dll先打包第三方报,告诉真正的包那些第三方包已经被处理了,下次就不用再打爆了2、在build文件下新建一个webpack.dll.js文件,内容如下const path = require("path")const webpack = require("webpack")...
·
1、dll优化原理:
每次打包都会处理所有的内容,但是并不更改第三方包(vue/jquery/axios等等),那么dll先打包第三方报,告诉真正的包那些第三方包已经被处理了,下次就不用再打爆了
2、在build文件下新建一个webpack.dll.js文件,
内容如下
const path = require("path")
const webpack = require("webpack")
module.exports = {
entry:{
vendor:['vue/dist/vue.esm','vue-router','axios','jquery']
},
output:{
path:path.join(__dirname,'../static/js'),
filename:'[name].dll.js',
library:'[name]_library'
},
plugins:[
new webpack.DllPlugin({
path:path.join(__dirname,"../static/js/vendor-manifest.json"),
name:"[name]_library"
})
]
}
3、告诉真正的打包文件webpack.prod.conf.js里面去添加如下内容:
new webpack.DllReferencePlugin({
context:path.join(__dirname,".."),
manifest:require("../static/js/vendor-manifest.json")
}),
最后在package.json文件中集成到vue-cli程序中
5、项目运行npm run dll,
你会发现在static/js下面会生成这两个文件
然后执行npm run build会发现打包速度明显快很多,
这是注释掉dll插件项目打包所需的时间
这是运行完npm run dll ,再运行npm run build所需的时间
更多推荐
已为社区贡献11条内容
所有评论(0)