本文共 4362 字，大约阅读时间需要 14 分钟。
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按需引入
// 柱状图实例import * as echarts from 'echarts/core'; // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。import { BarChart } from 'echarts/charts'; // 引入柱状图图表，图表后缀都为 Chartimport { TooltipComponent, ToolboxComponent, GridComponent} from 'echarts/components'; // 引入提示框，标题等等的组件，组件后缀都为 Componentimport { CanvasRenderer } from 'echarts/renderers'; // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步echarts.use( [TooltipComponent, GridComponent, ToolboxComponent, BarChart, CanvasRenderer]) 6、CDN引入“”
7、组件库如Element-Ui或Ant-Design按需引入，具体看官方文档 &
1、时间选择器展示英文，手动配置中文包
如果发现时间选择器组件展示的是英文而非中文一月二月等，全局手动配置一下语言，引入中文语言包import moment from 'moment'//手动引入所需要的语言包import 'moment/locale/zh-cn';// 指定使用的语言moment.locale('zh-cn'); 2、CDN引入后面最好备一份本地文件，预防CDN挂掉或者用户没网情况
这里通过判断window.jquery全局对象是否存在来判断jQuery是否通过CDN加载成功，不成功就通过document.write方法来加载本地的jQuery文件注意这里用到了转义字符‘\’避免浏览器将document.write方法内的“”当成了结束标签。
转载地址：http://zlqzi.baihongyu.com/