vue打包优化——vendor体积过大

在Vuejs的开发中，通常遵循以下规范来使用vue文件名的大小写：

单个组件的vue文件名应始终使用首字母大写的驼峰命名法。例如：HelloWorldvue

对于多个单词组成的组件名，除了第一个单词以外，每个单词的首字母都应该大写。例如：UserSettingsvue

在引用vue组件时，应该总是使用正斜杠“/”来分隔目录和文件名。即使在Windows平台上也应该如此。同时，目录和文件名都应该全部小写。例如：import HelloWorld from '@/components/HelloWorldvue';

这些规范有助于提高代码的可读性和可维护性，并且与Vuejs社区的通用惯例相符合，因此建议开发者在Vuejs项目中遵循这些规范。

首先，在写 Vue 的时候，应该采用懒加载模式，之后生成的包，就会被打入到不同分组的 js，运行时按需加载，详情见：Vue-路由懒加载；这个意义重大！

其次，可利用，webpackDllReferencePlugin webpackDllReferencePlugin 将常用不怎么变更的文件，打入一个统一的文件，外链使用。这个主要作用也可用来缩小包构建的时间；这个网上教程蛮多，就不赘述。也可参见这个项目 jade-blog 来配置；这一步即是你通过配置将部分库抽离出来，打包成另外的文件。

再次，可以利用 webpack-bundle-analyzer 可以分析打包后生成的文件结构，十分牛掰（最新 Vue-cli 带有此配置）；在 packagejson 中配置如下命令 npm run analyz，运行即可查看之：

"analyz": "NODE_ENV=production npm_config_report=true npm run build"

以上就是关于vue打包优化——vendor体积过大全部的内容，包括:vue打包优化——vendor体积过大、Vue在前端开发中需要注意什么、.vue文件名 首字母什么时候用大写，什么时候用小写 有规范吗等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！