一，package.json 优化

固定依赖包版本

1. 修改前

   // brfore
   {
       "dependencies": {
           "moment": "^2.29.4",
       }
   }
   

2. 通过查找 package-lock.json 中 moment 的版本，然后将 package.json 中的 moment 版本固定

   "moment": {  
       "version": "2.29.4",  
       "resolved": "https://registry.npmmirror.com/moment/-/moment-2.29.4.tgz",  
       "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w=="  
   },
   

3. 修改后

   // after
   {
       "dependencies": {
           "moment": "2.29.4",
       }
   }
   

版本说明

• 指定版本：比如1.2.2，遵循“大版本.次要版本.小版本”的格式规定，安装时只安装指定版本
• 波浪号+指定版本：比如~1.2.2，表示安装 1.2.x 的最新版本（不低于 1.2.2），但是不安装 1.3.x。也就是说安装时不改变大版本号和次要版本号
• 插入号+指定版本：比如^1.2.2，表示安装 1.x.x 的最新版本（不低于 1.2.2），但是不安装 2.x.x。也就是说安装时不改变大版本号
  • 需要注意的是，如果大版本号为 0，则插入号的行为与波浪号相同。

二，vue.config.js 优化

关闭 SourceMap

生产环境一般不需要启用 SourceMap，一是为了加速构建，二是不暴露源代码。

// vue.config.js
module.exports = {
    productionSourceMap: false
}

启用 Gzip

• HTTP 协议上的 gzip 编码是一种用来改进 web 应用程序性能的技术，web 服务器和客户端（浏览器）必须共同支持 gzip。 目前主流浏览器都支持 gzip，包括 IE11。

• 理论上 gzip 压缩只需要 nginx 端开启，而前端不需要其他配置。但 nginx 的压缩会占用服务器 CPU 资源，并发过高时，导致服务器性能下降。

  • 所以需要在前端工程打包时生成对应的 gz 静态文件，若查找到对应的 gz 静态文件，则 nginx 不再参与压缩工作，而是直接返回资源，大大地提升了传输效率。

// vue.config.js
module.exports = {
    chainWebpack: config => {  
        if (process.env.NODE_ENV !== 'development') { 
            const CompressionPlugin = require('compression-webpack-plugin')  
            config.plugin('compression-webpack-plugin').use(new CompressionPlugin({  
                filename: 'assets/js/[name].js.gz[query]',  
                algorithm: 'gzip',  
                test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),  
                threshold: 10240,  
                minRatio: 0.8,  
                deleteOriginalAssets: false// 不删除源文件  
            }))  
        }  
    },
}

三，nginx 优化

启用 Gzip

http {
    gzip on;
    gzip_static on; # 开启静态 gz 文件返回
    gzip_min_length 5k;
    gzip_buffers 4 16k;
    gzip_http_version 1.0;
    gzip_comp_level 7;
    gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
}

四，打包优化

去除 console.log

1. 安装依赖

   npm install babel-plugin-transform-remove-console -D
   

2. 配置如下

   // babel.config.js
   const plugins = ['@vue/babel-plugin-transform-vue-jsx'] // 生产环境移除console  
   if (process.env.NODE_ENV === 'production') {  
       plugins.push('transform-remove-console')  
   }  
   module.exports = {  
       plugins: plugins,  
       presets: [  
           [  
               '@vue/app',  
               {  
                   modules: false,  
                   targets: {  
                       browsers: ['> 1%', 'last 2 versions', 'not ie <= 8', 'Android >= 4', 'iOS >= 8']  
                   },  
                   useBuiltIns: 'entry' 
               }  
           ]  
       ]  
   }