亲宝软件园·资讯

展开

webpack构建打包性能优化

如期_而至 人气:0

前言

开发的时候,如果每次我们修改了文件,webpack都能很迅速地帮我们编译完构建完而且浏览器能保存状态更新内容,体验会比较好;优化产出代码,减小体积,设置hash,可以提升生产环境上网页的加载速度

一、优化打包构建速度,提升开发体验和效率

1.1 优化babel-loader

开启缓存,只要是es6代码没有改动的部分,下次重新构建的时候可以使用缓存,不被重新编译。

    rules: [
        {
            test: /\.js$/,
            loader: ['babel-loader?cacheDirectory'],
            include: srcPath, //设置include或者exclude的范围,限定需要编译文件的目录范围
            //exclude: /node_modules/
        }
    ]

1.2 IgnorePlugin,避免引入无用模块

比如有些库包含多个国家的语言包(moment.js),我们只需要中文包或者英文报,所以我们需要避免引入不需要的语言包,

    plugins: [
        //忽略moment下的/locale目录,再手动import locale内部我们需要使用到的语言包
        new webpack.IgnorePlugin(/\.\/local/,/moment/)
    ]

1.3 noParse 避免重复模块化解析

代码中如果有xx.min.js之类的文件,基本已经采用模块化处理过的,无需在对类似文件进行递归解析处理,会引入进项目

module: {
    noParse: [/xx\.min\.js$/]
}

1.4 happyPack 多进程打包

开启多进程打包,提高构建速度

rules: [
    {
        test: /\.js$/,
        //把对.js文件的处理转交给id为babel的HappyPack实例
        use: ['happypack/loader?id=babel'],
        include: srcPath
    }
],
plugins: [
    new HappyPack({
        //用唯一的标识符id来代表当前的HappyPack是用来处理一类特定的文件
        id: 'babel',
        //如何处理.js文件,用法和loader配置中一样
        loaders: ['babel-loader?cacheDirectory']
    })
]

1.5 ParallelUglifyPlugin多进程压缩js

在生产环境中使用,因为在开发环境下没有必要压缩js代码

plugins: [
    new ParallelUglifyPlugin({
        //还是使用的UglifyJs压缩,只不过帮助开启了多进程
        uglifyJS: {
            output: {
                beautify: false,//最紧凑的输出
                comments: false,//删除所有的注释
            },
            compress: {
                //删除所有的'console'语句,可以兼容ie浏览器
                drop_console: true,
                //内嵌定义了但只用到一次的变量
                collapse_vars: true,
                //提取出出现多次但是没定义成变量去引用的静态值
                reduce_vars: true
            }
        }
    })
]

1.6 热更新

改完代码,浏览器无需刷新,新代码生效,状态保留。

entry: {
    index: [
        'webpack-dev-server/client?http://localhost:8080/',
        'webpack/hot/dev-server',
        path.join(srcPath, 'index.js')
    ],
    other: path.join(srcPath, 'other.js')
}

plugins: [
    new HotModuleReplacementPlugin()
]

devServer: {
    xxx: 'xx'
    hot: true //开启热更新
}

配置完后,修改样式,热更新生效了,但修改js,热更新没有生效,接下来还需要在js中设置允许热更新监听的模块

if(module.hot){
    module.hot.accept(['xxx文件名'], () => {
        //在注册了热更新的js文件修改后,才会进行热更新
    })
}

1.7 DllPlugin动态链接库插件

前端框架如Vue、React,体积大,构建慢,比较稳定,不常升级版本。这种情况下,同一个版本只构建一次,不用每次都重新构建; 由于webpack已内置DllPlugin,所以不需我们额外安装插件,包含两个插件 DllPlugin(用来打包出dll文件,只要打包过,就不需要再打包了),DllReferencePlugin(使用dll文件)

//webpack.dll.js文件中的配置
mode: 'development', 
entry: {
    //把react相关模块放到一个单独的动态链接库
    react: ['react','react-dom']
},
output: {
    //输出动态链接库的文件名称,[name]代表当前动态链接库的名称
    filename: '[name].dll.js',
    path: distPath,
    //存放动态链接库的全局变量名称,例如对应react来说就是 _dll_react
    //之所以在前面加上_dll_是为了防止全局变量冲突
    library: '_dll_[name]'
}
plugins: [
    new DllPlugin({
        //动态链接库的全局变量名称,需要和output.library中保持一致
        //该字段的值也就是输出的manifest.json文件中name字段的值
        name: '_dll_[name]',
        path: path.join(distPath, '[name].manifest.json')
    })
]

配置好webpack.dll.js后,在package.json文件中定义执行webpack.dll.js的命令

    "script": {
        "dll": "webpack --config build/webpack.dll.js"
    }

以上配置完执行dll打包命令打包后会产出react.dll.js和react.manifest.json文件,需要在项目中使用到打包后的react.dll.js

//在inde.html中
<script src="./react.dll.js"></script>
//在webpack.dev.js中
plugins: [
    new DllReferencePlugin({
        //描述react动态链接库的文件内容
        manifest: require(path.join(distPath, 'react.manifest.json'))
    })
]

二、webpack性能优化-产出代码

可以从体积更小;合理分包,不重复加载;速度更快、内存使用更少这几方面去进行优化

output: {
    publicPath: 'http://cdn.xxx.com'//引用文件路径是,路径名前加cdn域名的前缀
}

打包后,将代码放入cdn域名对应的服务器中。

mode为production时,打包后的代码会自动压缩,Vue/React会自动删掉调式代码(如开发环境的warning),也会自动启用Tree-Shaking,将未使用到的代码删掉

mode: "production"

将多个函数合并到一个函数中,可以使代码体积更小,创建的函数作用域更少,代码可读性更好

module.exports = {
    resolve: {
        mainFields: ['jsnext: main','browser','main']
    },
    plugins: [
        //开启Scope Hosting
        new ModuleConcatenationPlugin()
    ]
}

总结

加载全部内容

相关教程
猜你喜欢
用户评论