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所需的时间
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐