DDR爱好者之家

压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
站长资源 2024/12/28 佚名
74 1538
DDR爱好者之家 Design By 杰米

问题

由于这次项目是在初学 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压缩的方案大家可以看看下面的相关文章

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米