一、打包环境区分
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'; // 引入柱状图图表,图表后缀都为 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方法内的“”当成了结束标签。