时间:2021-05-25
问题
由于这次项目是在初学 Vue 之后的第一个正式项目,没有考虑到类似 路由懒加载、 按需加载的问题 ,所以呢,也算是没经验。
到了这些天,项目写得差不多了,准备放到服务器测试,才发现这个问题。
优化前:
app.js 2.3MBvendor.js 2.4MBvendor.css 612kBapp.js.map 9.13MBvendor.js.map 16.21MB//不一一列举....优化
接下来看看优化方法。
优化步骤1: 不生成.map文件
在 webpack.prod.cong.js 文件下,修改配置项 sourceMap 设置为 false 或者删除:
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }, // sourceMap: true //将sourceMap关闭就不会打包出.map文件}),这样的话,开发环境就不会生成 .map 文件。
优化步骤2: 按需加载
对于项目中,一些 通用 或者 不是特别差异 的组件可以使用按需加载,在需要的时候加载即可,并且会自动缓存。
这时候需要在 router 文件夹下的 index.js 文件修改路由配置中的 组件引入 方式:
Vue.use(Router)export default new Router({ routes:[{ path:"/", component:function(resolve){ require(["./../components/Index"],resolve) } }]})这样的话,这个组件就会在你需要加载的时候才会加载。
优化步骤3: VueRouter的懒加载
官方文档
在 vue-router 的模块引入,将默认的 import .. from .. 引入方式,修改为一步。如下:
const Foo = () => import("/Foo.vue)```然后在 `配置路由` 中,和之前一样使用:
Vue.use(Router)export default new Router({routes:[{path:”/“,component:Foo}]})优化步骤4:将大的第三方包通过<script>标签引入
一般将类似 `echarts` 这种比较大的第三方依赖包,通过 `<script></script>` 标签来引入的话,会很大程度缩小打包的大小。
但是需要在 `vue` 配置文件这样配置:
`webpack.base.config.js` 中添加 `不打包` 的包的名称,这样打包的时候才不会把这些包一起打包进去:
module.exports = { entry:{...}, output:{...}, resolve:{...}, module:{...}, externals:{ "echarts":"echarts" //不打包的包名 }}然后在 index.html 中用 <script></script> 标签引入依赖包的CDN或者其他地址。
优化步骤5: 图片压缩
这个不用怎么说,有个地址很好用,推荐下:tinypng
优化后
通过这几步骤,优化完成的每个文件都会缩小好多倍:
app.js 136.2kBvendor.js 213.2kBvendor.css 612kB //css 这个我还没办法app.js.map 0MBvendor.js.map 0MB更多关于VUE压缩的方案大家可以看看下面的相关文章
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言Vue.js是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。以下代码是Vue.js最简单的例子,
vue正常打包之后一些图片文件很大,使打包体积很大,通过image-webpack-loader插件可将大的图片进行压缩从而缩小打包体积step1:npmins
本文介绍了Vue.js中ref($refs)用法举例总结,分享给大家,具体如下:看Vue.js文档中的ref部分,自己总结了下ref的使用方法以便后面查阅。一、
什么是Vue.js?Vue.js是用于构建交互式的Web界面的库。Vue.js提供了MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。Vue.js
Vue.js卓越发展的前端技术框架。近些年,相继涌现了令人欣喜的前端开发框架Angular.js、React.js和Vue.js。而Vue.js是一个JavaS