打包&配置&优化--备忘录

一、打包环境区分

1、正常

/ * npm start */
  	process.env.NODE_ENV === 'production',
/ * npm run build */
  	process.env.NODE_ENV === 'development'

2、额外环境区分打包配置

package.json中配置命令⬇️
	"build-pro": "REACT_APP_ENV=pro 打包执行代码"
	"build-dev": "REACT_APP_ENV=dev 打包执行代码"
等号前面会作为key，等号后面会作为value，打包时可通过⬇️获取做判断
	process.env.REACT_APP_ENV === 'pro' || 'dev'

二、打包大小优化

1、检查打包后文件具体大小及文件详细组成方法

vue⬇️
在后面加 --report
打包后会在dist目录下生成一个report.html文件，点开就是
	"build": "vue-cli-service build --report"

react⬇️
package.json文件里一般有一个analyze命令，直接运行就可以查看
	npm run analyze

2、优化打包后chunk-vendors.js文件体积过大
​ 当我们运行项目并且打包的时候，会发现chunk-vendors.js这个文件非常大，那是因为webpack将所有的依赖插件，如elementUi，xlsx等全都压缩到了这个文件里面，这时我们可以将其拆分，将所有的依赖都打包成单独的js文件。
利用splitChunks将每个依赖包单独打包，在生产环境下配置，代码如下

// vue.config.js中
module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      let optimization = {
        runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 1024 * 1024 * 1, // 超过1M才会被拆分
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name (module) {
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                return `npm.${packageName.replace('@', '')}`
              }
            }
          }
        }
      }
      Object.assign(config, {
        optimization
      })
    }
  }
}

3、打包压缩 compression-webpack-plugin
注：在这里有两个问题，第一是 compression-webpack-plugin版本的问题，如果有报错，安装5.0.0版本即可解决。第二个问题是需要后端配合在nginx开启gzip服务。一般浏览器都已支持.gz压缩文件，在http请求的Request Headers 中能看到 Accept-Encoding: gzip。

/* vue.config.js文件中 */
/* 1. yarn add -D compression-webpack-plugin */
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css'] // 压缩js和css文件

module.exports = {
  configureWebpack: () => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          // 下面是下载的插件的配置
          new CompressionWebpackPlugin({
            algorithm: 'gzip',
            test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'), // 哪些类型的文件做压缩
            threshold: 1024 * 1024 * 1, // 大于1M
            minRatio: 0.8 // 压缩率大于0.8
          })
        ]
      }
    }
  },
  productionSourceMap: process.env.NODE_ENV === 'development', // 开发环境可以打开,生成.map文件，方便定位错误所在(此配置和压缩无关)
}

nginx 上配置

gzip  on;
gzip_static on;
gzip_buffers 4 16k;
gzip_comp_level 8;
gzip_types application/javascript text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  压缩文件类型 
gzip_vary on;

4、去除代码中的console和debug
注：terser-webpack-plugin有一个版本问题，可能会报错Cannot read property ‘javascript’ of undefined，只需要固定版本4.2.3即可

/* vue.config.js文件中 */
/* 1. yarn add -D terser-webpack-plugin@4.2.3 */
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  configureWebpack: () => {
    if (process.env.NODE_ENV === 'production') {
      return {
        optimization: {
	        minimizer: [
	          new TerserPlugin({
	            terserOptions: {
	              ecma: undefined,
	              warnings: false,
	              parse: {},
	              compress: {
	                drop_console: true, // 去除console
	                drop_debugger: true // 去除debug
	              }
	            }
	          })
	        ]
	      }
      }
    }
  }
}

5、图表库ECharts按需引入

Echarts官网文档-引入页

// 柱状图实例
import * as echarts from 'echarts/core'; // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import { BarChart } from 'echarts/charts'; // 引入柱状图图表，图表后缀都为 Chart
import {
    TooltipComponent,
    ToolboxComponent,
    GridComponent
} from 'echarts/components'; // 引入提示框，标题等等的组件，组件后缀都为 Component
import { CanvasRenderer } from 'echarts/renderers'; // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步

echarts.use(
    [TooltipComponent, GridComponent, ToolboxComponent, BarChart, CanvasRenderer]
)

6、CDN引入“vue项目cdn引入”

7、组件库如Element-Ui或Ant-Design按需引入，具体看官方文档Elenent-Ui & Ant-Design

二、小问题

1、时间选择器展示英文，手动配置中文包

如果发现时间选择器组件展示的是英文而非中文一月二月等，全局手动配置一下语言，引入中文语言包
import moment from 'moment'
//手动引入所需要的语言包
import 'moment/locale/zh-cn';
// 指定使用的语言
moment.locale('zh-cn');

2、CDN引入后面最好备一份本地文件，预防CDN挂掉或者用户没网情况

<script src="https://ajax.googleapis.com/ajax/libs/jquery1.4.3/jquery.min.js"></script>
<script>!window.jQuery && document.write("<script src=\"scripts/jquery-1.4.3.min.js\">" + "<\/scrript>")

这里通过判断window.jquery全局对象是否存在来判断jQuery是否通过CDN加载成功，不成功就通过document.write方法来加载本地的jQuery文件注意这里用到了转义字符‘\’避免浏览器将document.write方法内的“”当成了结束标签。