vue项目经验案例,vue项目总结

　　本文主要介绍vue项目完成后如何实现项目优化的实例。通过示例代码非常详细，有一定的参考价值。感兴趣的朋友可以参考一下。

一、为开发模式与发布模式指定不同的打包入口

　　Vuui创建的项目隐藏了webpack配置，因此您可以在src根目录中创建新的vue.config.js配置文件。导出配置文件中的配置对象。

　　2.默认情况下，vue项目的开发模式和发布模式共享一个打包的入口文件(src/main.js)。可以使用configureWebpack或chainWebpack来定义Webpack的打包配置。

　　将main.js文件更改为main-dev.js制作main.js的副本，并将其更改为main-prod.js

　　默认情况下，通过导入语法导入的第三方依赖包，最终会被打包合并到同一个文件中，这样会导致打包成功后出现单个文件过大的问题(我们导入的css样式表也会被打包到同一个文件中，导致文件过大)。

　　为了解决上述问题，可以通过webpack的外部节点来配置和加载外部CDN资源。任何在外部声明的第三方依赖包都不会被打包并合并到最终文件中。

　　配置webpack的externals节点，在发布阶段进行配置。

　　在外部声明的第三方依赖包不会被打包，项目在使用依赖包时会在全局窗口中找到相应的对象。因此，需要将CDN中的js和css资源引入到index.html文件中，以便在全球范围内找到它们。

　　在public/index.html文件的文件头中，添加以下CDN资源引用：

　　具体操作流程：

　　在main-prod.js中，注释掉nprogress和quill引用的css文件。

　　在index.html头部区域，通过CDN加载nprogress和quill的js和css样式

　　在index.html的头部区域，通过CDN加载其余的依赖js。

　　可以通过staticfile CDN找到对应的开源库。

　　使用CDN前的文件大小：

　　使用CDN后的文件大小：

　　虽然在开发阶段，我们启用了element-ui组件的按需加载，尽可能减少了打包体积，但是那些都是按需添加的。

　　加载组件或占用大量文件。此时，我们可以以CDN的形式在element-ui中添加组件。

　　加载，这样可以进一步减少打包后的文件体积。

　　具体操作流程如下：

　　在main-prod.js中，按需注释掉element-ui加载的代码。

　　在index.html的头部区域，通过CDN加载element-ui的js和css样式

　　完成后的文件大小：

　　在不同的包装环境下，首页的内容可能会有所不同。我们可以通过插件对其进行定制，插件的配置如下：

　　//via plugin(html ):查找html插件。Tap():可以修改这个插件中的固定配置项。

　　//通过args:可以得到当前插件的一些相关参数。

　　//在args[0]中添加自定义属性isprod，在开发阶段赋值为true，在发布阶段赋值为false。

　　在public/index.html的首页，可以根据isProd的值来决定如何渲染页面结构。

　　当一个项目被打包构建时，对应于路由的所有组件都会被打包到一个文件中，导致文件过大，影响页面加载。如果能把不同路由对应的组件分成不同的代码块，然后在访问路由时加载相应的组件，效率会更高。

　　关于vue项目完成后如何实现项目优化的文章到此结束。更多相关vue项目优化内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。