性能优化篇---Webpack构建速度优化

使用DllPlugin优化

•  在使用webpack进行打包时候，对于依赖的第三方库，如react，react-dom等这些不会修改的依赖，可以让它和业务代码分开打包；
•  只要不升级依赖库版本，之后webpack就只需要打包项目业务代码，遇到需要导入的模块在某个动态链接库中时，就直接去其中获取；而不用再去编译第三方库，这样第三方库就只需要打包一次。
•  接入需要完成的事：

        1. 将依赖的第三方模块抽离，打包到一个个单独的动态链接库中

        2. 当需要导入的模块存在动态链接库中时，让其直接从链接库中获取

        3. 项目依赖的所有动态链接库都需要被加载

•  接入工具(webpack已内置)

        1. DllPlugin插件：用于打包出一个个单独的动态链接库文件；

        2. DllReferencePlugin:用于在主要的配置文件中引入DllPlugin插件打包好的动态链接库文件

•  配置webpack_dll.config.js构建动态链接库 

const path = require('path');  
const DllPlugin = require('webpack/lib/DllPlugin');  
module.exports = {  
    mode: 'production',  
    entry: {  
        // 将React相关模块放入一个动态链接库  
        react: ['react','react-dom','react-router-dom','react-loadable'],  
        librarys: ['wangeditor'],  
        utils: ['axios','js-cookie']  
    },  
    output: {  
        filename: '[name]-dll.js',  
        path: path.resolve(__dirname, 'dll'),  
        // 存放动态链接库的全局变量名，加上_dll_防止全局变量冲突  
        library: '_dll_[name]'  
    },  
    // 动态链接库的全局变量名称，需要可output.library中保持一致，也是输出的manifest.json文件中name的字段值  
    // 如react.manifest.json字段中存在"name":"_dll_react"  
    plugins: [  
        new DllPlugin({  
            name: '_dll_[name]',  
            path: path.join(__dirname, 'dll', '[name].manifest.json')  
        })  
    ]  
} 

•  webpack.pro.config.js中使用 

const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');  
...  
plugins: [  
    // 告诉webpack使用了哪些动态链接库  
        new DllReferencePlugin({  
            manifest: require('./dll/react.manifest.json')  
        }),  
        new DllReferencePlugin({  
            manifest: require('./dll/librarys.manifest.json')  
        }),  
        new DllReferencePlugin({  
            manifest: require('./dll/utils.manifest.json')  
        }),  
] 

•  注意：在webpack_dll.config.js文件中，DllPlugin中的name参数必须和output.library中的一致；因为DllPlugin的name参数影响输出的manifest.json的name；而webpack.pro.config.js中的DllReferencePlugin会读取manifest.json的name，将值作为从全局变量中获取动态链接库内容时的全局变量名

•  执行构建

        1. webpack --progress --colors --config ./webpack.dll.config.js

        2. webpack --progress --colors --config ./webpack.prod.js

•  html中引入dll.js文件
•  构建时间对比：["11593ms","10654ms","8334ms"]

（编辑：泰州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!