14、webpack生产环境构建 今天药忘吃喽~ 2022-01-27 15:23 222阅读 0赞 **1)代码压缩** 虽然 [UglifyJSPlugin][] 是代码压缩方面比较好的选择,但是还有一些其他可选择项。以下有几个同样很受欢迎的插件: * [BabelMinifyWebpackPlugin][] * [ClosureCompilerPlugin][] 如果决定尝试以上这些,只要确保新插件也会按照 [tree shake][] 指南中所陈述的,具有删除未引用代码(dead code)的能力足矣。 **2)source map** 基于调试源码和基准测试的帮助,生产环境建议开启source map,但是建议使用source-map,而不是开发中的inline-source-map 配置更改如下 const merge = require('webpack-merge'); const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); const common = require('./webpack.common.js'); module.exports = merge(common, { devtool: 'source-map', plugins: [ new UglifyJSPlugin({ sourceMap: true }) ] }); ※避免在生产中使用 inline-\*\*\* 和 eval-\*\*\*,因为它们可以增加 bundle 大小,并降低整体性能。 **3)指定环境** 许多 library 将通过与 process.env.NODE\_ENV 环境变量关联,以决定 library 中应该引用哪些内容。例如,当不处于生产环境中时,某些 library 为了使调试变得容易,可能会添加额外的日志记录(log)和测试(test)。其实,当使用 process.env.NODE\_ENV === 'production' 时,一些 library 可能针对具体用户的环境进行代码优化,从而删除或添加一些重要代码。我们可以使用 webpack 内置的 [DefinePlugin][] 为所有的依赖定义这个变量: 更改webpack.prod.js文件如下 const webpack = require('webpack'); const merge = require('webpack-merge'); const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); const common = require('./webpack.common.js'); module.exports = merge(common, { devtool: 'source-map', plugins: [ new UglifyJSPlugin({ sourceMap: true }), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }) ] }); 检查设置是否有效 更改src/index.js import { cube } from './math.js'; if (process.env.NODE_ENV !== 'production') { console.log('Looks like we are in development mode!'); } function component() { var element = document.createElement('pre'); element.innerHTML = [ 'Hello webpack!', '5 cubed is equal to ' + cube(5) ].join('\n\n'); return element; } document.body.appendChild(component()); **4)分离css文件** 使用ExtractTextPlugin将CSS分离成单独的文件 // 用法: const ExtractTextPlugin = require("extract-text-webpack-plugin"); module.exports = { module: { rules: [ { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) } ] }, plugins: [ new ExtractTextPlugin("styles.css"), ] } 它会将所有的入口 chunk(entry chunks)中引用的 \*.css,移动到独立分离的 CSS 文件。因此,你的样式将不再内嵌到 JS bundle 中,而是会放到一个单独的 CSS 文件(即 styles.css)当中。 如果你的样式文件大小较大,这会做更快提前加载,因为 CSS bundle 会跟 JS bundle 并行加载。 [UglifyJSPlugin]: https://www.webpackjs.com/plugins/uglifyjs-webpack-plugin [BabelMinifyWebpackPlugin]: https://github.com/webpack-contrib/babel-minify-webpack-plugin [ClosureCompilerPlugin]: https://github.com/roman01la/webpack-closure-compiler [tree shake]: https://www.webpackjs.com/guides/tree-shaking [DefinePlugin]: https://www.webpackjs.com/plugins/define-plugin
还没有评论,来说两句吧...