Vue项目打包编译优化方案
1.不生成.map文件
默认情况下，当我们执行npmrunbuild命令打包完一个项目后，会得到一个dist目录，里面有一个js目录，存放了该项目编译后的所有js文件。
我们发现每个js文件都有一个相应的.map文件，它们仅是用来调试代码的，可以加快打包速度，但会增大打包体积，线上我们是不需要这个代码的。这里我们需要配置不生成map文件。
- vue-cli2
config/index.js文件中，找到productionSourceMap:true这一行，将true改为false。
- vue-cli3
在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文件，分块分成多个。
①首先根据官网的说明，我们需要安装一个插件
npminstall--save-dev@babel/plugin-syntax-dynamic-import
②然后在babel.config.js中配置如下内容（网上说的是.babelrc文件，这是以前的配置格式）：
module.exports={
presets:["@vue/app"],
plugins:["@babel/plugin-syntax-dynamic-import"]
};
③接下来修改路由加载组件部分的代码。
这是我们原来的路由写法：
router.js
importVuefrom"vue";
importRouterfrom"vue-router";
importHomefrom"./views/Home.vue";
importAboutfrom"./views/About.vue";
importFormfrom"./views/Form.vue";
importTablefrom"./views/Table.vue";
importNavMenufrom"./views/NavMenu.vue";
Vue.use(Router);
exportdefaultnewRouter({
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
importVuefrom"vue";
importRouterfrom"vue-router";
constHome=()=>import("./views/Home.vue");
constAbout=()=>import("./views/About.vue");
constForm=()=>import("./views/Form.vue");
constTable=()=>import("./views/Table.vue");
constNavMenu=()=>import("./views/NavMenu.vue");
Vue.use(Router);
exportdefaultnewRouter({
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项目打包优化的资料请关注毛票票其它相关文章！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。