vuecli打包优化,vue3打包优化
本文主要为大家介绍Vue项目的优化包装，有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
前言
1.路由延迟加载1。为什么需要路由懒加载？
2.如何实现路由的懒加载？
3.路由延迟加载中的神奇注释
二、分析包装尺寸1。要求
2.如何生成打包的分析文件？
第三，webpack配置不包括打包1。要求
2.排除包装
四。引用网络资源1。需求
2.加拿大
3.实施步骤
第五，打包并删除console.log1的需求
2.代码演示
摘要
前言
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) {
外部={
/**
*外部对象属性解析：
*“包名”:“项目中引入的名称”
*/
vue: Vue ，
元素-ui :元素，
xlsx: XLSX
}
cdn={
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。