vue 打包优化 路由按需加载 通过vue写的单页应用时，可能会有很多的路由引入。当打包构建的时候，javascript包会变得非常大，影响加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度。 const Home = () => import( './Home.vue') const router = new VueRouter({ routes: [ { path: '/home', component: Home } ] })
动态import()打包出来文件的name是按照0,1,2...依次排列，如0.js、1.js等，有的时候我们希望打包出来的文件名是打包前的文件名称。webpackChunkName 可以设置打包后的文件名称。
const Home = () => import(/*webpackChunkName:'Home'*/ './Home.vue')大多数情况下使用动态import()循环加载的，这样就需要进入变量，使用[request]来告诉webpack，这里的值是根据后面传入的字符串来决定。
import(/* webpackChunkName: "[request]" */ `@/components/${view}.vue`)app.js vendor.js manifest.js
CDN #### 为什么使用CDN 在前端工程中，将静态文件放到CDN上，可以直观地减小资源包大小，同时加快首屏加载。
若不使用CDN，则所有的资源都会被打包到app.js和vendor.js中，页面需要等到这两个包下载完成才可以显示。
若使用CDN，则可以利用浏览器多线程的优势，同时下载若干静态文件以及剩下的app.js和vendor.js，以此达到加快加载的目的。
首先，在index.html的头部引入cdn资源
<script src="http://unpkg.com/vue@2.6.11/dist/vue.min.js"></script> <script src="http://unpkg.com/element-ui@2.13.0/lib/index.js"></script> <script src="http://unpkg.com/vue-router@3.1.3/dist/vue-router.js"></script> <script src="http://unpkg.com/axios@0.19.0/dist/axios.min.js"></script> <script src="http://unpkg.com/echarts@4.5.0/dist/echarts.min.js"></script>在webpack设置中添加externals（外部扩展)设置，如此，则import 引用的资源将不被打包，而是在运行时从外部获取。
configureWebpack: (config) => { config.externals = { 'vue': 'Vue', 'element-ui': 'ELEMENT', 'vue-router': 'VueRouter', 'axios: 'axios', 'echarts': 'echarts', } }, Gzip打包压缩安装插件
yarn add -D compression-webpack-plugin在文件vue.config.js里导入compression-webpack-plugin，并添加压缩文件类型
const CompressionWebpackPlugin = require('compression-webpack-plugin') const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i在configureWebpack 里配置如下代码
module.exports = { productionSourceMap:false, configureWebpack: (config) => { config.plugins.push( new CompressionWebpackPlugin({ filename: '[path].gz[query]', algorithm: 'gzip', test: productionGzipExtensions, // 匹配需要压缩的后缀名 threshold: 10240, //只有大小大于该值的资源会被处理单位字节 minRatio: 0.8, //只有压缩率小于这个值的资源才会被处理。默认值是 0.8。 }), ) }, Nginx配置 ```js server{ listen 8087; server_name localhost; gzip on; gzip_min_length 1k; gzip_comp_level 9; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; gzip_vary on; gzip_disable "MSIE [1-6]\."; location /appShare { client_max_body_size 10m; root /home/test/webIndex/appShare; try_files $uri $uri/ /appShare/index.html; index index.htm index.html; } } 关闭SourceMap在项目进行打包后，会将开发中的多个文件代码打包到一个文件中，并且经过压缩，去掉多余的空格，且babel编译化后，最终会用于线上环境，那么这样处理后的代码和源代码会有很大的差别，当有bug的时候，我们只能定位到压缩处理后的代码位置，无法定位到开发环境中的代码，对于开发不好调式，因此sourceMap出现了，它就是为了解决不好调式代码问题的。
优点 ： 对于开发者开说，方便调试，可以看到源代码
缺点： 生成的sourcemap文件会增加打包的体积。线上用户也能看到源代码。
在 Vue 项目中用到的分析工具：webpack-bundle-analyzer 。它以图形的方式将结果更直观地展示出来，分析打包后的每个模块的大小。
安装插件
yarn add -D webpack-bundle-analyzer在文件vue.config.js里导入compression-webpack-plugin
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin module.exports = { configureWebpack: (config) => { if (process.env.NODE_ENV === 'production') { config.plugins.push(new BundleAnalyzerPlugin()) } },执行yarn run build --report 后生成分析报告
stat (打包之前输入的文件大小)
parsed（打包之后输出的文件大小）
gzipped（开启gzip压缩后的文件大小）