shanghai
devilsmell@sina.com

vue打包文件过大及速度问题

that is another site

vue打包文件过大及速度问题

以前写vue项目的时候,直接用vue脚手架搭建项目,也没有做什么配置与改变,因为项目没有要求所以只要写好就行了。后来开发的时候随着技术的升级,就不只是简简单单的写完行了,还需要考虑到性能的问题,这就需要知道好多东西才能更好的处理性能问题。

今天我就简单的优化一下性能的方法,希望能够帮到你。首先是打包的时候,如果直接用脚手架的那一套的话,打包后如果引入组件较多的话会导致vendor.js非常的大,这很不利于页面的加载,你可以使用vue-router的路由异步加载

export default new Router({
  routes: [ {
      path: '/login',
      component: ()=>import("@/components/pages/signIn/signIn"),
    }]
});

或者直接 const demo = () => import('@/components/demo')

这样打包的时候会把每一个页面打包成一个js,这样vendor就会变得很小,而且每个页面的js也很小,这样页面加载速度就会快很多。

还有在打包的时候会很慢是以为在打包的时候用的是uglifyjs-webpack-plugin这个插件,他是单线程的所以打包起来比较慢,我们可以webpack-parallel-uglify-plugin这个多线程的插件,在webpack.prod.conf.js文件中引入const ParallelUglifyPlugin = require(‘webpack-parallel-uglify-plugin’)

new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false } }, sourceMap: config.build.productionSourceMap, parallel: true }), 把上面的代码替换成下面的代码 new ParallelUglifyPlugin({ cacheDir: ‘.cache/’, uglifyJS:{ output: { comments: false }, compress: { warnings: false } }}), 这样的话打包的时候速度能至少提高一倍。

有什么意见可以提出来大家相互交流,相互学习。

发表评论

电子邮件地址不会被公开。 必填项已用*标注