webpack学习（十五）：性能优化

￡神魔★判官ぃ 2022-04-05 07:38 288阅读 0赞

demo地址: [https://github.com/Lkkkkkkg/webpack-demo][https_github.com_Lkkkkkkg_webpack-demo]  
继上一次完成了生产模式开发模式的分离: [https://blog.csdn.net/qq593249106/article/details/84948648][https_blog.csdn.net_qq593249106_article_details_84948648]

## 开发模式 ##

## 代码压缩 ##

开发环境下, 我们依然对代码的体积有一定的要求, 更小的体积可以让加载速度更快, 开发效率更高, 当然配置也相对简单, 只需要在 devServer 中添加一个 compress: true , 压缩代码减小体积:  
**webpack.dev.js**

devServer: {  //开发模式启用服务器
            contentBase: './dist',
            port: 8080,
            compress: true //开启代码压缩
        }

## 模块热替换（HMR） ##

开发过程中, dev-server 只提供了热重载, 检测到代码自动重新构建, 但是构建也需要时间, 如果修改小模块也要重新构建刷新页面就会显得麻烦, 使用模块热替换（HMR）就可以做到修改模块自动修改页面, 不用重新构建刷新页面, 这个项目已经用了 react-hot-loader( react的HMR ), 无需再配置, 配置教程:  
HMR: [https://blog.csdn.net/qq593249106/article/details/84928595][https_blog.csdn.net_qq593249106_article_details_84928595]  
react-hot-loader: [https://blog.csdn.net/qq593249106/article/details/84947301][https_blog.csdn.net_qq593249106_article_details_84947301]

## 生产模式&开发模式 ##

## Loaders ##

将 loaders 应用于最少数的必要模块中，使用 include 字段仅将 loader 模块应用在实际需要用其转换的位置中：

{ 
    	    test: /\.js$/,
    	    // exclude: /node_modules|packages/, exclude代表不需要进行 loader 的目录
    	    include: path.resolve(__dirname, "src"), //include代表需要进行 loader 的目录
    	    use: 'babel-loader'
    	}

## 生产模式 ##

## source-map ##

webpack 在构建中提供了不少于7种的sourcemap模式，其中eval模式虽然可以提高构建效率，但是构建后的脚本较大，因此生产上并不适用。而source-map 模式可以通过生成的 .map 文件来追踪脚本文件的 具体位置，进而缩小脚本文件的体积，这是生产模式的首选，并且在生产中，我们需要隐藏具体的脚本信息，因此可以使用 cheap 和module 模式来达到目的。  
综上，在生产的webpack devtool选项中，我们使用 cheap-module-source-map的配置  
**webpack.prod.js**

devtool: 'cheap-module-source-map', //生产模式启用代码跟踪

## 独立css ##

使用 MiniCssExtractPlugin 来分离 css 到独立的一个文件, 而不是嵌入在 js 当中, 配置教程:  
[https://blog.csdn.net/qq593249106/article/details/84933978][https_blog.csdn.net_qq593249106_article_details_84933978]

## 压缩js, html, css 文件 ##

压缩 js : webpack4.0 在mode 为‘production’时，默认会启动 js 代码的压缩  
压缩 css :使用 optimize-css-assets-webpack-plugin , 配置教程：[https://blog.csdn.net/qq593249106/article/details/84933978][https_blog.csdn.net_qq593249106_article_details_84933978]  
压缩 html : 当 mode 设置为 production 时自动开启

[https_github.com_Lkkkkkkg_webpack-demo]: https://github.com/Lkkkkkkg/webpack-demo
[https_blog.csdn.net_qq593249106_article_details_84948648]: https://blog.csdn.net/qq593249106/article/details/84948648
[https_blog.csdn.net_qq593249106_article_details_84928595]: https://blog.csdn.net/qq593249106/article/details/84928595
[https_blog.csdn.net_qq593249106_article_details_84947301]: https://blog.csdn.net/qq593249106/article/details/84947301
[https_blog.csdn.net_qq593249106_article_details_84933978]: https://blog.csdn.net/qq593249106/article/details/84933978