性能优化已经成为程序员必不可少的一项技能了，但是性能优化配置麻烦、遵守规则太多，并且某些性能优化规则并不适用于所有场景。

静态资源适用CDN

内容分发网络（CDN）可以加快请求网页的速度，CDN加速适用于大多数项目。

善用缓存，不重复加载相同的资源

参考资料：

优化打包体积

分析打包后的文件

npm i -D webpack-bundle-analyzer

webpack-bundle-analyzer将打包后的内容形成直观树状图

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
moudle.export ={
    plugin:{
        new BundleAnalyzerPlugin({
            analyzerHost:'127.0.0.1',
            analyzer:8081
        })
    },
}

配置启动命令

//package.json    需要安装 npm i -D cross-env

"analyz":"cross-env NODE_ENV=production npm_config_report=true npm run build"

npm run analyz 自动打开项目依赖图

externals

这个功能主要是用在创建一个库的时候用的，但是也可以在我们项目开发中充分使用 Externals的方式，我们将这些不需要打包的静态资源从构建逻辑中剔除出去，而使用 CDN 的方式，去引用它们。（大大减少包的体积）

使用CDN引入Vue

<script src="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>

externals: {
     vue: "Vue",
    },

Tree-shaking

tree-shaking的主要作用是用来清除代码中无用的部分。目前在webpack4 我们设置mode为production的时候已经自动开启了tree-shaking。但是要想使其生效，生成的代码必须是ES6模块。不能使用其它类型的模块如CommonJS之流。如果使用Babel的话，这里有一个小问题，因为Babel的预案（preset）默认会将任何模块类型都转译成CommonJS类型，这样会导致tree-shaking失效。修正这个问题也很简单，在.babelrc文件或在webpack.config.js文件中设置modules： false就好了

// webpack.config.js

module:{
    rules:[
    {
        test:/\.js$/,
        use:{
            loader:'babel-loader',
            options:{
                presets:['@babel/preset-env',{modules:false}]
            }
        },
        exclude:/(node_modules)/   //node_modules除外
    }]
}

// .babelrc
{
  "presets": [
    ["@babel/preset-env",
      {
        "modules": false
      }
    ]
  ]
}

压缩文件

压缩文件可以使文件体积更小，文件下载速度更快，用户体验更好。

在webpack可以使用如下插件进行压缩:

JavaScript：UglifyPlugin
CSS ：MiniCssExtractPlugin
HTML：HtmlWebpackPlugin

还可以使用gzip进行压缩

gzip是目前最有效的压缩方法，压缩后包体积减少了将近60%

nginx配置缓存及gzip

图片优化

图片压缩

依赖url-loader、img-loader安装

npm install img-loader --save-dev
npm install --save-dev url-loader

大图片打包

npm install image-webpack-loader --save-dev

{
        test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)$/i,
        use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10000 , /* 图片大小小于1000字节限制时会自动转成 base64 码引用*/
                name: '[path][name].[ext]?[hash:6]!./dir/file.png'
              }
            },
            /*对图片进行压缩*/
            {
              loader: 'image-webpack-loader',
              query: {
                progressive: true,
                optimizationLevel: 7,
                interlaced: false,
                pngquant: {
                  quality: '65-90',
                  speed: 4
                }
              }
            }
          // {
          //   loader:'url-loader?limit=5000&name=[path][name].[ext]?[hash:6]!./dir/file.png'
          // }
        ]
}

webpack5，图片类型属于resource asset，存在内置loader

{ 
    test:/\.(png|jpe?g|gif)(\?.*)?$/, 
    type:'asset/resource', 
    generator: 
        { 
            filename: 'imgs/[name]--[hash].[ext]' 
        } 
   },

使用webp格式图片

WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。

性能优化之网页瘦身