网络编程 
首页 > 网络编程 > 浏览文章

压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)

(编辑:jimmy 日期: 2024/12/26 浏览:3 次 )

问题

由于这次项目是在初学 Vue 之后的第一个正式项目,没有考虑到类似 路由懒加载、 按需加载的问题 ,所以呢,也算是没经验。

到了这些天,项目写得差不多了,准备放到服务器测试,才发现这个问题。

优化前:

app.js    2.3MB
vendor.js   2.4MB
vendor.css  612kB
app.js.map  9.13MB
vendor.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>` 标签来引入的话,会很大程度缩小打包的大小。"htmlcode">

module.exports = {
  entry:{...},
  output:{...},
  resolve:{...},
  module:{...},
  externals:{
    "echarts":"echarts" //不打包的包名
  }
}

然后在 index.html 中用 <script></script> 标签引入依赖包的CDN或者其他地址。

优化步骤5: 图片压缩

这个不用怎么说,有个地址很好用,推荐下:tinypng

优化后

通过这几步骤,优化完成的每个文件都会缩小好多倍:

app.js    136.2kB
vendor.js   213.2kB
vendor.css  612kB  //css 这个我还没办法
app.js.map  0MB
vendor.js.map 0MB

更多关于VUE压缩的方案大家可以看看下面的相关文章

上一篇:Vue的Eslint配置文件eslintrc.js说明与规则介绍
下一篇:24个解决实际问题的ES6代码片段(小结)
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。