注意事项：
1、vue-cli4版本测试环境无奈打包出带有hash值的文件名，解决办法：
即使设置filenameHashing:true,也是有效的，vue-cli4版本是认准NODE_ENV='production',如果想执行 npm run build:stage【指令对应环境变量文件是env.staging】，须要设置NODE_ENV='production'优化次要步骤：
1、应用插件compressionPlugin进行gzip进行压缩，成果很显著
装置 npm install --save-dev compression-webpack-plugin如果装置失败，指定版本npm install --save-dev [email protected]const CompressionWebpackPlugin = require('compression-webpack-plugin');chainWebpack(config) { config.plugin('compressionPlugin').use( new CompressionWebpackPlugin({ test: /\.(js|css|json|ico|svg)$/,// 匹配文件格式 algorithm: 'gzip', threshold: 10240, // 对超过10k的数据压缩 minRatio: 0.8, // 压缩比 deleteOriginalAssets: false //是否删除源文件 }) );}nginx配置，间接粘贴在http {} 外面 gzip on; #其余属性不必，这个肯定要开，开启浏览器压缩申请 gzip_buffers 4 16k; # 压缩响应的缓冲区的数量和大小 gzip_comp_level 9; # 响应压缩的级别，1-9，数字越大压缩得越好，但越耗时间 gzip_http_version 1.1; # 默认1.1，所需的最小HTTP版本 gzip_min_length 1k; # 压缩最小大小，小于该值的文件不会被压缩 gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json; gzip_disable "MSIE [1-6]\."; gzip_vary on; 2、应用vue-cli4自带的splitChunks来分隔代码，会对公共模块进行抽取
chainWebpack(config) { config .when(process.env.NODE_ENV !== 'development', config => { config .plugin('ScriptExtHtmlWebpackPlugin') .after('html') .use('script-ext-html-webpack-plugin', [{ inline: /runtime\..*\.js$/ }]) .end() config .optimization.splitChunks({ chunks: 'all', cacheGroups: { libs: { name: 'chunk-libs', test: /[\\/]node_modules[\\/]/, priority: 10, chunks: 'initial' }, elementUI: { name: 'chunk-elementUI', priority: 20, test: /[\\/]node_modules[\\/]_?element-ui(.*)/ }, commons: { name: 'chunk-commons', test: resolve('src/components'), minChunks: 3, priority: 5, reuseExistingChunk: true } } }) config.optimization.runtimeChunk('single') } )}3、cdn援用依赖资源，不要应用预加载rel='prefetch',节约首页加载性能；
4、图片压缩，去除空格插件terser-webpack-plugin，等等
5、入口文件main.js的按需引入也是比拟重要的，只有在首页关联用到的文件，都会加载splitChunks切出来的文件，所以须要按需引入。
6、路由懒加载等开发细节，本人把控就好。