5分钟搞定vue-cli3Dll优化

在vue项目中因为第三方包,诸如vue,vue-router, axios,vuex都会打包到vendor.js里,vendor.js过大,导致打包速度慢,首页加载慢。

对于打包速度,主要受两点影响:一是处理内容的多少,二是处理步骤的多少。 在实际项目中,第三方库,一般只需要处理一次,不需要每次打包都要处理。

Dll优化

即第三方库预先处理, 实现了拆分 bundles,后续打包不放入vendor.js中,从而大大提升了构建速度。

在实现预处理之前,先介绍下主要用的的两个工具 DLLPluginDLLReferencePlugin

DllPlugin

这个插件是在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。 这个插件会生成一个名为 manifest.json 的文件,这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。

DllReferencePlugin

这个插件是在 webpack 主配置文件中设置的, 这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖。 通过引用 dll 的 manifest 文件来把依赖的名称映射到模块的 id 上, ,之后再在需要的时候通过内置的 webpack_require 函数来 require

废话不多说,撸起袖子干!!

Dll优化分为两个步骤:

1.  预处理第三方库
2. 告诉webpack 打包的时候不需要处理这些第三方库
  • 在vue-cli3搭建的项目中,在build文件夹下创建webpack.dll.js文件

        const path = require('path')
        const webpack = require('webpack')
        
        module.exports = {
            entry: {
                vender: ['vue/dist/vue.esm.js', 'vue-router', 'axios','vuex']
            },
            output: {
                path: path.join(__dirname, '../public/static'),
                filename: "[name].dll.js",
                library: "[name]_library"
            },
            plugins: [
                new webpack.DllPlugin({
                    path: path.join(__dirname,".","[name]-manifest.json"),
                    name: "[name]_library"
                })
            ]
        }
    
  • 在package.json添加指令

    "dll": "webpack --config build/webpack.dll.js",
  • 在vue.config.js 配置dll代码

    const webpack = require('webpack');
    const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
    module.exports = {
        ...
        configureWebpack: config => {
            if (isProduction) {
                // dll优化
                config.plugins.push(new webpack.DllReferencePlugin({
                    context: process.cwd(), //当前目录
                    manifest: require('./build/vender-manifest.json')
                   }))
                   // 将打包出来文件动态引入index.html
                config.plugins.push(
                    new AddAssetHtmlPlugin({
                        // dll文件位置
                        filepath: path.resolve(__dirname, './public/static/vender.dll.js'),
                        // dll 引用路径
                        publicPath: '/front/static/', 
                        outputPath: '/static/', // 输出的目录地址
                    })
                )
                ...
           
            }
        }
    }
  • 执行npm run dll ,只需要执行一次

到此,配置全部完成,后面直接执行npm run build ~~

实践是检验真理的唯一准则!!!

有点小注意!
vue-cl3不像之前cl2会在打包完成后显示打包的时间,如何看打包所用的时间,这里有个小技巧,请笑纳!!
在package.json ,build指令加上--report-json,打包后会生成report.json,里面的time字段就是打包所用时间,这里的--report 会生成report.html文件,可以看打包具体细节

"build": "vue-cli-service build --report-json --report --mode production",

在本人项目中测试结果:打包时间明显减少 ~


 不使用dll优化,

使用dll优化

最后,感谢阅读,希望对你有帮助!

你可能感兴趣的:(前端,vue-cli3,打包)