vue 打包优化

时间:2023-03-08 15:37:03
vue  打包优化

vue 打包优化

路由按需加载

通过vue写的单页应用时,可能会有很多的路由引入。当打包构建的时候,javascript包会变得非常大,影响加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就更加高效了。这样会大大提高首屏显示的速度。
    const Home = () => import( './Home.vue')
const router = new VueRouter({
routes: [
{ path: '/home', component: Home }
]
})

动态import()打包出来文件的name是按照0,1,2...依次排列,如0.js1.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上,可以直观地减小资源包大小,同时加快首屏加载。

  1. 若不使用CDN,则所有的资源都会被打包到app.js和vendor.js中,页面需要等到这两个包下载完成才可以显示。
  2. 若使用CDN,则可以利用浏览器多线程的优势,同时下载若干静态文件以及剩下的app.js和vendor.js,以此达到加快加载的目的。

首先,在index.html的头部引入cdn资源

	<script src="//unpkg.com/vue@2.6.11/dist/vue.min.js"></script>
<script src="//unpkg.com/element-ui@2.13.0/lib/index.js"></script>
<script src="//unpkg.com/vue-router@3.1.3/dist/vue-router.js"></script>
<script src="//unpkg.com/axios@0.19.0/dist/axios.min.js"></script>
<script src="//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压缩后的文件大小)