vue 打包优化
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="//unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<script src="//unpkg.com/[email protected]/dist/vue-router.js"></script>
<script src="//unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="//unpkg.com/[email protected]/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压缩后的文件大小）
