湘潭网站建设 在线磐石网络,二级域名对网站帮助,新手小白开公司全流程版,网上商城小程序源码webpack
Terser
Terser是一个javascript的解释(Parser),Mangler(绞肉机) /Compressor(压缩机)的工具集 早期我们会使用uglify-js来压缩#xff0c;丑化我们的javascript代码 但是目前已经不在维护 并且不支持ES6语法 Terser是从uglify-es fork 过来的 也就是说 Terser可以帮…webpack
Terser
Terser是一个javascript的解释(Parser),Mangler(绞肉机) /Compressor(压缩机)的工具集 早期我们会使用uglify-js来压缩丑化我们的javascript代码 但是目前已经不在维护 并且不支持ES6语法 Terser是从uglify-es fork 过来的 也就是说 Terser可以帮助我们压缩 丑化我们的代码 让我们的bundle变得更小 因为Terser是一个独立的工具 所以它可以单独安装 npm install terser terser js/file1.js -o foo.min.js -c -m
Compress option arrows: class或者object中的函数 转换成箭头函数 arguments: 将函数中使用arguments[index]转换成对应的参数名称 dead_code: 移除不可达的代码tree shaking
Managle option toplevel: 默认值是false 顶层作用域中的变量名称 进行丑化(转换) keep_classnames: 默认值是false 是否保持依赖的类名称 keep_fnames: 默认值是false 是否保持原来的函数名称
Terser在webpack中配置
webpack中有一个minimizer属性 在production模式下 默认就是使用TerserPlugin来处理我们的代码的 如果我们对默认的配置不满意 也可以自己来创建TerserPlugin的实例 覆盖相关的配置
首先我们需要打开minimize 让其对我们的代码进行压缩默认production模式下已经打开了 其次 我们可以在minimizer创建一个TerserPlugin
extractComments: 默认值位true 表示会将注释抽取到一个单独的文件中 在开发中 我们不希望保留这个注释时 可以设置为false
parallel: 使用多进程开发运行提高构建的速度 默认值是true
terserOptions: 设置我们的terser相关的配置 compress: 设置压缩相关的选项 mangle: 设置丑化相关的选项 可以直接设置为true toplevel: 顶层变量是否进行转换 keep_classnames: 保留类的名称 keep_fnames: 保留函数的名称
const TerserPlugin require(terser-webpack-plugin);
const CssMinimizerPlugin require(css-minimizer-webpack-plugin)module.exports {optimization: {minimize: true,minimizer:[//js代码简化 terserPluginnew TerserPlugin({extractComments: false,terserOptions: {compress:{arguments: true},mangle: true,toplevel: true}})//css代码简化 cssMinimizerPluginnew CssMinimizerPlugin({parallel true})]},}Tree Shaking
事实上webpack实现Tree Shaking采用了两种不同的方案 usedExports: 通过标记某些函数是否被使用 之后通过Terser来进行优化的 sideEffects: 跳过整个模块/文件 直接查看该文件是否有副作用
usedExports
将mode设置为development模式 为了可以看到usedExports带来的效果 我们需要设置为development模式 因为在production模式下 webpack默认的一些优化会带来很大影响
设置usedExports为true和false对比打包后的代码 在usedExports设置为true时 会有一段魔法注释 告知Terser在优化时 可以删除掉这段代码 这个时候 我们将minimize设置为true usedExports设置为false时 mul函数没有使用的函数没有被移除掉 usedExports设置为true时 mul函数被移除掉
sideEffects
sideEffects用于告知webpack complier哪些模块有副作用 副作用的意思是这里面额代码有执行一些特殊的任务 不能仅仅通过export来判断这段代码的意义 写在package.json中 表示index.js中有副作用 sideEffects:[./src/index.js],在package.json中设置sideEffects的值 如果我们将sideEffects设置为false 就是告知webpack可以安全的删除未用到的exports 如果有一些我们希望保留 可以设置为数组
所以在项目中对javascript的代码进行TreeShaking最好 在optimization中配置usedExports为true 来帮助Terser进行优化 在package.json中配置sideEffects 直接对模块进行优化
CSS实现Tree Shaking
Css的Tree Shaking需要借助于一些其他的插件 在早期的时候 使用PurifyCss插件来完成CSS的tree shaking 但是目前不维护了 目前使用PurgeCss来完成CSS的Tree Shaking 也是一个帮助我们删除未使用的css的工具
npm install purgecss-webpack-plugin
const { PurgeCssPlugin } require(purgecss-webpack-plugin);
const glob require(glob);
const path require(path);module.exports {plugins: [new PurgeCssPlugin({paths: glob.sync(${path.resolve(__dirname, ../src)}/**/*, { nodir: true })}),],
}Scope Hoisting
Scope Hoising从webpack3开始增加的一个新功能 功能是对作用域进行提升 并且让webpack打包后的代码更小 运行更快
默认情况下webpack打包会有很多的函数作用域 包括一些比如最外层的IIFE 无论是从最开始的代码运行 还是加载一个模块 都需要执行一系列的函数 Scop Hoisting可以将函数合并到一个模块中来运行
使用Scope Hoistiong非常简单 webpack已经内置了对应模块 在production模式下 默认这个模块就会启用 在development模式下 我们需要自己打开该模块
const webpack require(webpack);module.exports {plugins: [new webpack.optimize.ModuleConcatenationPlugin()],
]http压缩
http压缩是一种内置在服务器和客户端之间的 以改进传输速度和带宽利用率的方式 http压缩的流程 1.http数据在服务器发送前就已经被压缩了 可以在webpack完成 2.兼容的浏览器在向服务器发送请求时 会告知服务器自己支持哪些压缩格式 3.服务器在浏览器支持的压缩格式下 直接饭hi对应的压缩后的文件 并且在响应头中告知浏览器
webpack对文件压缩
webpack中相当于是实现了http压缩的第一步操作 我们可以使用CompressionPlugin 第一步 安装CompressionPlugin npm install compression-webpack-plugin 第二部 使用CompressionPlugin
new CompressionPlugin({test: /\.(css|js)$/,//匹配哪些文件需要压缩//threshold: 500, //设置文件从多大开始压缩minRatio: 0.7,//至少的压缩比例algorithm: gzip,//采用的压缩算法//include://exclude
})html文件中代码压缩 new HtmlWebpackPlugin({template: ./index.html,minify: isProduction? {//移除注释removeComments: true,//移除空属性removeEmptyAttributes: true,//移除默认属性removeRedundantAttributes: true,//折叠空白字符collapseWhitespace: true,//压缩内联的cssminifyCSS: true,//压缩javascriptminifyJS: {mangle: {toplevel: true,},},}: false,}),
