vuejs项目中npm run dll的部署

  

1、为什么要部署dll

每次运行或打包项目都会重新处理所有的内容，但是并不更改第三方包(vue/jquery/axios等等)，那么dll先打包第三方报，告诉真正的包那些第三方包已经被处理了，下次就不用再打包了。

2、dll部署步骤：

⑴.在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'// 当前Dll的所有内容都会存放在这个参数指定变量名的一个全局变量下，注意与DllPlugin的name参数保持一致
    },
    plugins:[
        new webpack.DllPlugin({
            path:path.join(__dirname,"../static/js/vendor-manifest.json"), // 本Dll文件中各模块的索引，供DllReferencePlugin读取使用
            name:"[name]_library"
        })
    ]
}

⑵.在webpack.prod.conf.js中的plugins下面添加以下代码：


new webpack.DllReferencePlugin({
   context:path.join(__dirname,".."),
   manifest:require("../static/js/vendor-manifest.json")
}),

⑶.在package.json文件中的scripts最后面添加以下代码：


"dll": "webpack --config build/webpack.dll.js"

最后运行npm run dll

这时你会发现在/static/js下面有2个关于vendor的文件。这就完成了！

以上是编程学习网小编为您介绍的“vuejs项目中npm run dll的部署”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。

相关文章
前端开发最新文章
热门教程