## 压缩图片和css ### 图片 1. image-webpack-loader 来压缩图片文件 ``` // image-webpack-loader 使用 imagemin 来进行压缩 use: [ 'file-loader', // 需要在file-loader之后添加 image-webpack-loader { loader: 'image-webpack-loader', options: { // 压缩 jpg mozjpeg: { progressive: true, }, // 压缩 png optipng: { enabled: false, // 可以使用enabled：false来禁用优化器 }, // 压缩 png pngquant: { quality: [0.65, 0.90], // 达到或超过最大质量所需的最少颜色数量 speed: 4 }, // 压缩 gif gifsicle: { interlaced: false, // 渐进式渲染 }, // 压缩 jpg 和 png为 webp webp: { quality: 75 // 压缩质量 } } } ] ``` 需要注意的是： 1. image-webpack-loader 需要在 file-loader 之后添加 2. 默认情况下会自动启用 jpg、png、gif、svg的优化器 压缩前后文件对比： 压缩前：  压缩后：  2. 使用 url-loader 将小图片转换为 base64 编码 ``` { test: /.(png|jpg|gif)$/, use: [{ loader: 'url-loader', options: { limit: 8192, // 单位是 Byte，当文件小于 8KB 时作为 DataURL 处理 } } ] } ``` ### 压缩 css 代码 1. optimize-css-assets-webpack-plugin ``` const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin'); plugins: [ new OptimizeCssAssetsWebpackPlugin(), ] ```   ## 优化 js代码 ### Tree Shaking 移除未引用的代码 使用前提： 1. 对于js代码，必须使用 es6模块化（因为es6模块化语法是静态的，可以使webpack分析出哪些是需要被剔除的代码。 ） ``` import { A } from './index.js' export function A() { ... } ``` 2. 开启production环境 ``` module.exports = { entery: '', output: {}, module: {}, plugins: [], mode: 'production', } ``` #### 如何配置 webpack 可以使 tree shaking生效 1. 配置 babel，保留es6模块化语句。 ``` { "presets": [ [ "env", { "modules": false // 关闭 babel 的模块化转换功能，保留原本的es6模块语法 } ] ] } ``` 2. UglifyJs 代码压缩工具 ，帮忙剔除无用的代码 通过分析 js 语法树，从而去掉无效代码，去掉console代码，缩短变量名等。 插件：uglifyjs-webpack-plugin ``` const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); optimization: { minimizer: [ new UglifyJsPlugin({ test: /\.js(\?.*)?$/i, parallel: true, // 使用多进程并行运行以提高构建速度 sourceMap: true, uglifyOptions: { warnings: false, parse: {}, compress: {}, mangle: true, // 注意 `mangle.properties` 的默认值是 `false`。 output: null, toplevel: false, nameCache: null, ie8: false, keep_fnames: false, }, }), ] } ``` ### 分离代码文件 #### 分离css文件 css-loader 会把样式字符串存储到js文件中，style-loader 会把样式字符串添加到style标签中。   这样会使js文件比较大，影响加载速度。所以我们需要把js中的css文件分离出来，css文件单独打包，并引入到html中。 1. 安装 mini-css-extract-plugin 插件 **npm install mini-css-extract-plugin -D** 2. 修改配置 ``` module: { rules: [ { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, { loader: "css-loader" } ] } }, plugins: [ new MiniCssExtractPlugin({ // 压缩打包css 文件插件 filename: "css/\[name\].css" // 打包后最终生成的 dist 文件里面的 打包后的 css 文件 })] ```   #### 如何实现按需加载 1. import(/* webpackChunkName: "show" */ './show') ``` index.js的代码： document.getElementById('btn').addEventListener('click', function(){ import(/* webpackChunkName: "show" */ './show').then(show => { show.default('webpack') }) }) show.js 的代码： module.exports = function(content) { alert('hello'\+ content); } ``` 2. /* webpackChunkName: "show" */ 是为动态生成的 chunk 指定一个名字, 同时还需要在 webpack.config.js 配置。 ``` output: { filename: 'build.js', path: resolve(__dirname, 'build'), // 通常写一个绝对路径 chunkFilename: '[name].js' // 为动态加载的 chunk 配置文件名称 }, ``` 如果不加 chunkFilename: '[name].js' 的配置，chunk的文件名称将会是 [id].js #### webpack 遇到 import(*) 的语句时的处理过程 1. 以 ./show.js 为入口，重新生成一个chunk 2. 当代码执行到 import 的时候，加载第一步生成的文件。 3. import 返回一个Promise， 可以在 then 函数中获取到 show.js 导出的内容 由于 import 返回 Promise，所以在一些不支持 Promise 的浏览器中，需要 Promise polyfill的支持。