Webpack

ContextReplacementPlugin

详情

taro小程序升级至2.0版本之后,由于transform-runtime按需打包的插件加入,导致taro小程序的包超过2M,通过webpack-bundle-analyzer查看每个模块体积的大小插件,可以看到moment.js以及其语言包占了差不多600kb-700kb的体积,所以需要将语言包剔除不需要的,只保留zh-CN中文包,这里需要使用到ContextReplacementPlugin,将不需要的依赖包不打入包内,进行剔除掉,做到按需打包。

使用

//如果是webpack,则是要在webpack.config.js中的plugin里面配置
import webpack from "webpack";
//...
plugins: [
    new webpack.ContextReplacementPlugin(/moment\/\\locale$/, /zh-cn/);
]

//如果是taro,这种使用react对接多端的框架,则是使用webpackChain
//2.0.0配置,config目录下的index.js
{
    //...
    mini: {
        webpackChain(chain, webpack) {
            chain.plugin('contextReplacement').use(new webpack.ContextReplacementPlugin(/moment[\/\\]locale/, /zh-cn/), []);
        }
    }
}

UglifyJsPlugin

详情

UglifyJsPlugin用于压缩、缓存和删除一些无用、注释的代码的作用。之前是放于webpack内部plugins插件数组里面的,webpack 4之后是将UglifyJsPlugin作为一个单独的插件抽取了出来,并把位置从plugins属性数组放入至optimization优化属性里面。

最近在CBA移动端m站适配,还出现了IOS 10.13.1系统的苹果手机,打开缓存、压缩以及删除注释后的打包代码,页面打不开的情况,发现需要配置UglifyWebpackPlugin里面的uglifyOptions,添加mangle属性,并将safari10的内部属性设置为true。

使用

普通配置如下(也是我这边使用的):

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    //...
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                //是否启用缓存文件机制
                cache: true,
                //是否启用多核进行压缩文件
                parallel: true,
                uglifyOptions: {
                    output: {
                        //这里将除了@license之外的注释全都剔除掉
                        comments: /@license/i
                    },
                    mangle: {
                        safari10: true
                    }
                },   
                //是否剔除注释
                extractComments: true
            })
        ]
    }
};

注意

uglifyjs-webpack-plugin只支持压缩、缓存以及剔除注释ES5语法的项目文件,如果想要这些功能放到ES6语法上面,需要下载其他的第三方外部依赖包 —— terser-webpack-plugin

TerserWebpackPlugin

详情

与uglifyjs-webpack-plugin的配置、使用方式以及产生的作用基本一样,不一样的点在于,uglifyjs-webpack-plugin不能对ES6语法的项目文件进行压缩、缓存文件以及剔除注释,而terser-webpack-plugin可以。

最近在CBA移动端m站适配,还出现了IOS 10.13.1系统的苹果手机,打开缓存、压缩以及删除注释后的打包代码,页面打不开的情况,发现需要配置TerserWebpackPlugin里面的terserOptions,添加mangle属性,并将safari10的内部属性设置为true。

使用

普通配置如下(也是我这边使用的):

const TerserWebpackPlugin = require('terser-webpack-plugin');
module.exports = {
    //...
    optimization: {
        minimizer: [
            new TerserWebpackPlugin({
                //是否启用缓存文件机制
                cache: true,
                //是否启用多核压缩文件机制
                parallel: true,
                terserOptions: {
                    output: {
                        //除了含有@license的注释,其余都剔除掉
                        comments: /@license/i
                    },
                    //用于兼容IOS 10.13.1系统的h5页面
                    mangle: {
                        safari10: true
                    }
                },
                //是否剔除注释
                extractComments: true
            })
        ]   
    }
};

SplitChunksPlugin

详情

CommonsChunkPlugin的优化转化类型,重点是将多个入口的公共导入部分以及第三方依赖包的公共导入部分抽出,形成多个文件,由于浏览器加载文件是异步的,且可以生成浏览器缓存文件,所以对于整个网站的性能以及加载速度都是质的提升。之前CommonsChunkPlugin也是放于webpack内部plugins插件数组里面,现在把位置从plugins属性数组放入至optimization优化属性里面。

使用

普通配置如下(也是我这边使用的):

module.exports = {
    //...
    optimization: {
        SplitChunks: {
            //导出公共部分的文件大小最小为0byte
            minSize: 0,
            //至少一个入口，将一个入口里面的公共部分导出生成另外一个js文件
            minChunks: 1,
            chunks: 'all',
            cacheGroups: {
                //将某些体积大的第三方依赖包里面的公共导入部分导出,并命名为packageBase
                packageBase: {
                    name: 'packageBase',
                    minSize: 0,
                    minChunks: 1,
                    chunks: 'initial',
                    //对应的是react、redux、react-dom、lodash、moment和antd这些体积比较大的包
                    test: (module)=>{
                        return /(react|redux|react-dom|lodash|moment|antd)/.test(module.context);
                    },
                    //优先级为10
                    priority: 10   
                },
                //将自己编写的某些公共导入部分导出,并命名为commons
                commons: {
                    name: 'commons',
                    minSize: 0,
                    minChunks: 1,
                    chunks: 'initial',
                    //优先级为5
                    priority: 5
                }   
            }
        }  
    }   
}

如何设置url-loader的图片打包生成的目录路径

原因

最近在搞欧冠”数说”欧冠的h5项目时,遇到了一个问题:打包生成的图片,如何放至打包目录的images目录下,经过查阅资料,images的配置不仅仅有limit属性设置图片体积大小的限制来区分什么时候图片以base64显示,什么时候以打包压缩之后的图片显示,还有一个name属性,可以用来设置打包生成的目录路径以及文件名称。

使用

普通配置如下(也是我这边使用的):

module.exports = {
    //...
    module: {
        rules: [//...
        {
               test: /(png|bmp|jpg|jpeg|gif)$/i,
               use: [{
                  loader: 'url-loader',
                  options: {
                          limit: 102400,
                          //这样就可以配置图片打包生成的目录路径以及文件名称
                          //注意: [name]为chunks入口的名称
                          name: 'images/[name].[hash:6].[ext]'  
                  }
               }] 
        }]
    }
};