根据 webpack-bundle-analyzer 插件对 vue 项目进行性能优化

最新推荐文章于 2024-07-16 11:01:18 发布

taoqidejingling

最新推荐文章于 2024-07-16 11:01:18 发布

阅读量1.3k

点赞数 1

分类专栏：随笔文章标签： vue.js 性能优化 javascript

本文链接：https://blog.csdn.net/taoqidejingling/article/details/122962358

版权

随笔专栏收录该内容

41 篇文章 1 订阅

订阅专栏

关闭生产 productionSourceMap

关闭生产 productionSourceMap

vue 项目打包后会自动生成 dist 文件，在 dist/js 文件下出现一些 map 文件，是因为 productionSourceMap 没有关闭
根目录新建 vue.config.js 文件配置如下

// vue.config.js
module.exports = {
  productionSourceMap: false, // 关闭生产 sourceMap
}

map 文件作用
- 项目打包后，代码都是经过压缩加密的
- 如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错
- 有了 map 可以像未加密的代码一样，准确输出哪一行哪一列有错

路由懒加载

使用 vue-router 的时候，如果按照默认配置，所有路由都会被打包到一个 bundle.js 文件中，bundle 文件名一般是 app.js，app.js 属于项目公共部分代码
路由使用懒加载结合魔法注释，会根据魔法注释来划分 webpack 打包模块
执行 npm run build 能看到很多小的 js 文件， app.js 文件体积也减小了

import Vue from 'vue'
import Router from 'vue-router'
// 懒加载方式一
const Home = () => import(/* webpackChunkName: Home */'@/components/Home.vue')

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home // 引入变量
    },
    {
      path: '/about',
      name: 'About',
      // 懒加载方式二 
      component: () => import(/* webpackChunkName: About */'@/components/About.vue')
    }
  ]
})

组件懒加载

跟路由懒加载形式一样，也是使用 () => import('xxx') 的形式
懒加载会生成一个单独的 js 文件
除非一个组件过于庞大，在开发过程中，才会想着用组件拆分的形式
每一个小组件都这样拆分，最终得到很多小的 js 文件，反而是因为网络请求的原因，拖慢加载速度

<template>
  <section>
    <HomeHeader />
    <HomeFooter />
  </section>
</template>

<script>
// 组件懒加载
const HomeHeader = () => import("./home-header");
// 组件正常加载
import HomeFooter from "./home-footer";

export default {
  name: "Home",
  components: {
    HomeHeader,
    HomeFooter,
  }
};
</script>

element-ui 按需加载

在项目终端输入 vue add element 回车
在输出的选项中选 Import on demand 按需导入回车；Fully import 是全部导入

语言选择 zh-CN

安装成功后会在 src 目录下出现一个 plugins/element.js 文件

main.js 会自动引入 import './plugins/element.js'；如果 element 样式没有识别出来，手动引入样式 import 'element-ui/lib/theme-chalk/index.css'

babel.config.js 也注入了 element-ui 插件

使用 cdn 引入依赖包

vue、vuex、vue-router、axios、element-ui 使用 cdn 引入，cdn 引入的版本需要和依赖包引入的版本一致，放在 public/index.html 文件中；使用 cdn，可以减轻带宽压力

<!-- public文件下的index.html引入cdn -->
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- element-ui 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.2.0/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.0/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui@2.4.5/lib/index.js"></script>
    <!-- built files will be auto injected -->
  </body>
</html>

删除 package.json 里面使用 cdn 引入的依赖包

删除 import 导入的依赖和 Vue.use()，如 src/router/index.js 文件

// import Vue from 'vue'
// import Router from 'vue-router'
// Vue.use(Router)

根目录新建 vue.config.js 配置依赖
- 外部文件格式为 'aaa' : 'bbb'；其中，aaa 表示要引入的外部资源名字，bbb 表示该模块提供给外部引用的名字，由对应的库自定。例如，vue 为 Vue

/* 项目根目录创建 vue.config.js 配置如下 */ 
module.exports = {
	productionSourceMap: false, // 关闭生产 sourceMap
	// cdn 文件下载到本地配置
	configureWebpack: {
        // 外部扩展，通过 cdn 引入，不会被 webpack 打包
		externals:{
			'vue': 'Vue',
			'vue-router': 'VueRouter',
			'vuex':'Vuex',
			'axios': 'axios',
		}
	}
}

配置完成后卸载依赖包，可以直接删除 node_modules 包，重新 npm install；也可以使用 npm uninstall 指定依赖包卸载
通过开发者模式 Network 工具，可以看到 vue.js、vuex.js、vendor.js 等文件分别由一个线程进行加载
依赖库使用 cdn 文件加载，网络请求速度与 cdn 速度有关，如果不放心别人 cdn ，将上述 cdn 文件内容下载到本地放在 static/public 目录下当做静态文件引入即可
建议使用 cdn 引入依赖的用户在链接地址上锁定版本，以免将来升级时受到非兼容性更新的影响

vue element-ui 优化打包 bundle js 大小_stu_yiliang的博客-CSDN博客_elementui打包优化

配置参考 | Vue CLI

taoqidejingling

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
根据 webpack-bundle-analyzer 插件对 vue 项目进行性能优化

vue项目性能优化：1）关闭 productionSourceMap: false；2）路由懒加载结合魔法注释；3）组件懒加载根据项目实际情况；4）element-ui 按需加载；5）使用 cdn 引入；
复制链接

扫一扫

专栏目录