vue-cli打包后js文件大的吓人,15.9MB?

Question

图片在static文件夹里的img文件夹里,
第三方插件只用了swiper和jq,并都做了处理,打包后的网站正常显示,
然后将项目上传到个人服务器

打开看看,
进入网站,蜜汁白屏,再看看network

怎么回事?这个js文件为什么这么大?(加载完毕后网站还是正常显示的)
重新打包,发现了盲点

这是打包时的情况

这是打包后的js文件夹,发现这个map文件更吓人...

这是什么情况?
ps:
1.之前为了解决打包后图片大于10kb自动修改路径和css背景图片无法正常显示的问题给webpack.base.conf.js文件里img部分的limit值添了两颗0
2.路由懒加载还没处理
3.还有哪里没有提到还请大牛们提醒

Answer 1

jquery和swiper本身就很大了，建议引用包比较大的单独拆分出来再build

module.exports = {
  entry: {
    vendor: ['vue','vuex','vue-scroller','jquery','vue-awesome-swiper','vue-touch'],
    echarts: ['echarts'],
    app: './src/main.js'
  },
  
  ...
}

Answer 2

压缩图片,代码压缩并去掉注释代码

Answer 3

使用异步加载的方式进行载入
具体可以看下这个大佬的文章，有几篇关于webpack的优化
https://jeffjade.com/2017/08/...

Answer 4

将图片转成datauri嵌入了吧？可以看下具体的生成代码

Answer 5

先查下是什么占比最多？
1.如果是图片比较多的话，建议传到服务器上，然后用链接地址引用。
2.三方插件较多的话，就采用懒加载吧

Answer 6

好奇.jpg，也许你需要webpack-bundle-analyzerwebpack插件分析一下。

Answer 7

在config/index.js文件里面把bundleAnalyzerReport属性设置为true，这样就可以看到你打包了什么模块，然后再拆包。可以看看这个文章

Answer 8

查到了会产生这么大的js文件的原因了,就是因为我之前在webpack.base.conf.js文件里img部分的limit值添了两颗0的原因(自己想的方法果然不太靠谱),这样虽然解决了图片和背景图路径问题,但是显然不是一个好办法,在https://www.zhihu.com/questio... 楼中大佬的解释下使用"如果你用了vue-cil，那么在build目录下找到utils.js中的ExtractTextPlugin.extract({}),里面添加下面这个属性就完美解决了publicPath: '../../'"的方法完美解决,感谢各位大佬的回答!刚注册的没法点赞,只能口头感谢了

Answer 9

你可以使用路由赖加载（按需加载）来进行路由的配置，这样可以进行些优化的操作，比如：

const Home= resolve =>{
  require(['./components/home/index.vue'],resolve);
};
{
                name:'home',
                path:'/home',
                title:"首页",
                component:Home,
            }

这样app.js打包出来会小很多很多，其次，你可以使用happypack这个插件来实现打包速度的优化，再是可以使用webpack-bundle-analyzer来分析打包后各种文件的大小，来实现优化的方案