vue webpack打包优化,vue项目进行哪些优化
我相信现在很多人都用Vue做过各种项目，但是项目代码的完成和上线并不代表结束，上线后的优化也是很重要的一点。本文主要介绍了关于Vue项目优化和打包的相关信息，有需要的朋友可以参考一下。
目录
前言1。为什么需要懒装？2.如何实现懒加载？3.懒加载中的魔评？2.分析包装尺寸？1.要求？3.webpack配置不包括打包？1.要求？4.排除包装？参考网络资源？1.要求？2.CDN3。实施步骤？5.从包装中取出console.log1。
前言
Vue项目开发之后，项目打包发布之前，必不可少的操作就是项目优化，这也是程的一份红利。跟着这篇文章的脚步来看看如何优化项目吧~
一、路由懒加载
1. 为什么需要路由懒加载
刚开始项目的时候，我发现所有的js文件和css文件一进入页面就被加载了。这个过程非常耗时。
如果响应页面的js文件和css文件对应哪个页面打开就加载，那么页面加载速度会大大提高。
2. 如何实现路由懒加载
Vue官方文档：路由懒加载
代码如下(示例):
{
路径：“/login”，
组件：()=import(@/views/login/index )，
隐藏：真
},
3. 路由懒加载中的魔法注释
您可以通过在注释中指定webpackChunkName来自定义这个文件的名称。
代码如下(示例):
components=()=import(/* webpackChunkName: log in */./component/Login.vue )
二、分析包大小
1. 需求
了解每个文件在您要打包的文件中所占的空间。以便我们可以分析和优化代码。
2. 如何生成打包分析文件
运行npm运行预览- -在终端中报告。这个命令将从我们的门户main.js执行依赖分析，并分析每个包的大小。最后，将在生成的dist文件夹下生成一个report.html文件。打开后可以看到我们在项目中使用的文件占用的空间~
(效果图如下：)
三、webpack配置排除打包
1. 需求
从生成的打包文件中排除一些不常用的包。
比如上图所示的xsxl.js和element.js，可以从打包生成的文件中排除。
2. 排除打包
找到vue.config.js并添加外部项，如下所示：
代码如下(示例):
configureWebpack: {
//配置单页应用程序的页面标题
姓名：姓名，
外部：{
/**
*外部对象属性解析。
*基本格式：
*“包名”:“项目中引入的名称”
*
*/
vue: Vue ，
element-ui: ElementUI ，
xlsx: XLSX
},
解决：{
别名：{
@: resolve(src )
}
}
}
四、 引用网络资源
1. 需求
经过前面的操作，打包生成的包要小很多。然而，如果没有这些依赖包，就没有办法在线运行项目。然后我们需要参考网络中的资源来支持我们代码的运行。
2. CDN
CDN的全称是“内容分发网络”，中文叫内容分发网络。我们用它来加速访问。
放一些静态资源：css，第三方CDN服务器上的js、图片、视频可以加快访问速度。
好处：
减少应用程序包的包体积。
加速对静态资源的访问
使用浏览器缓存长期缓存不可更改的文件。
3. 实现步骤
注意：开发环境时，文件资源仍然可以从本地node_modules中取出，只有项目上线时，才需要使用外部资源。此时，我们可以用环境变量来区分。如下所示：
代码如下(示例):
在vue.config.js文件中：
让外部={}
设cdn={ css: []，js: [] }
constis production=process . env . node _ env== production //确定它是否是生产环境。
if (isProduction) {
外部={
/**
*外部对象属性解析：
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。