Vue项目打包编译优化方案

1. 不生成.map文件

默认情况下，当我们执行 npm run build 命令打包完一个项目后，会得到一个dist目录，里面有一个js目录，存放了该项目编译后的所有js文件。我们发现每个js文件都有一个相应的 .map 文件，它们仅是用来调试代码的，可以加快打包速度，但会增大打包体积，线上我们是不需要这个代码的。这里我们需要配置不生成map文件。

config/index.js文件中，找到 productionSourceMap: true 这一行，将 true 改为 false。

在 vue.config.js 中编写以下内容：

module.exports = { productionSourceMap: false}

2. 按需引入第三方包

默认情况下，在打包完后的js文件中，vendor.xxx.js 这个文件是非常大的，它主要是我们用到的第三方包（vue、vue-router、vuex、axios、element-ui等等）。这里面的大部分是我们要用到的功能，而像 element-ui 这种，明显可以按块来分，我们只是用到了里面的个别组件，完全可以把它按需取出，没必要全部打包。

在 element-ui 的官网，介绍了按需引入的方法，借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

3. 路由懒加载

默认情况下，在打包完后的js文件中，app.xxx.js 这个文件是非常大的，它主要是我们编写的一些组件。那么无法避免的问题就是：当用户访问网页的时候，第一次的请求要加载整个 app.xxx.js，当我们的项目比较复杂的时候，这个文件也是相当大的。

接下来我们要做的，就是路由懒加载。也就是当访问一个页面的时候，只加载当前组件相关的js资源，访问其它页面的时候，再加载相应的组件代码。

通过vue提供的路由懒加载功能，我们能将原来的一个 app.xxx.js 文件，分块分成多个。

① 首先根据官网的说明，我们需要安装一个插件

npm install --save-dev @babel/plugin-syntax-dynamic-import

② 然后在 babel.config.js 中配置如下内容（网上说的是 .babelrc 文件，这是以前的配置格式）：

module.exports = { presets: ['@vue/app'], plugins: ['@babel/plugin-syntax-dynamic-import']};

③ 接下来修改路由加载组件部分的代码。

这是我们原来的路由写法：

router.js

import Vue from 'vue';import Router from 'vue-router';import Home from './views/Home.vue';import About from './views/About.vue';import Form from './views/Form.vue';import Table from './views/Table.vue';import NavMenu from './views/NavMenu.vue';Vue.use(Router);export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About }, { path: '/form', name: 'myForm', component: Form }, { path: '/table', name: 'myTable', component: Table }, { path: '/nav_menu', name: 'myNavMenu', component: NavMenu } ]});

这是我们修改完的路由写法：

router.js

import Vue from 'vue';import Router from 'vue-router';const Home = () => import('./views/Home.vue');const About = () => import('./views/About.vue');const Form = () => import('./views/Form.vue');const Table = () => import('./views/Table.vue');const NavMenu = () => import('./views/NavMenu.vue');Vue.use(Router);export default new Router({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: Home }, { path: '/about', name: 'about', component: About }, { path: '/form', name: 'myForm', component: Form }, { path: '/table', name: 'myTable', component: Table }, { path: '/nav_menu', name: 'myNavMenu', component: NavMenu } ]});

更细节的内容参见官方文档

以上就是Vue项目打包编译优化方案的详细内容，更多关于vue项目打包优化的资料请关注好吧啦网其它相关文章！