webpack打包文件过大。

Question

入口文件main.js。
调用接口：let RouterConfig=getTemp(),返回不同的变量。然后选择不同的样式。
代码切割:if(RouterConfig=='temp1'){
require.ensure([], function(require){

//对应不同的模块调用不同的样式
require('./statics/css/temp1/css/temp1Common.css')
require('./statics/css/temp1/css/css.css')
require('./statics/css/temp1/css/public.css')
require('./statics/css/temp1/css/tempv1.css')
require('./statics/css/temp1/css/mi.css')
var　temp1Router =require('./temp1Router')
//不同的路由
var router = new Router({
  routes: temp1Router.default
});
//实例化不同的vue实例
new Vue({
  el: '#app',
  store,
  router:router,
  template: '<App/>',
  components: { App }
})

});
}
现在一共四个模块，但是都是上M数
open/statics/js/0.872ddfde8c516a666a56.js 3.46 MB 0 [emitted] [big
open/statics/js/1.46d7a987dbae7b5e4ad0.js 3.31 MB 1 [emitted] [big] open/statics/js/2.9938c49ceb9377b151c6.js 2.52 MB 2 [emitted] [big] open/statics/js/3.4ac8f52e9e9e7a6cf987.js 2.55 MB 3 [emitted] [big] open/statics/js/vendor.9488c6d42750fce9f870.js 1.29 MB 4 [emitted] [big] vendor

看了下js里面 是使用第三方vux一些代码 大头是一些图片打包成的base64格式的。请问下，现在是需要把图片分离出js吗？看了很多网上的答案都没有适合我的情况。

Answer 1

说下我这边的做法，不正之处请指点。

1.图片单独拿出来；

2.所有需要require的地方，如果可以用第三方免费CDN全部改为CDN，不再require。经测试，所有的require语句webpack都会打包。

举个例子：

开发代码为：

发布时，会注释掉红框部分，改为html通过CDN加载。如此压缩完的js代码只有百k到几百k。

可能看起来文件大小是固定的，其实当你改完代码再次让浏览器加载时，浏览器只需要加载你写的代码，其他都缓存了。

另外最终要的原因是，我们，公司，没有，CDN，服务器。

Answer 2

使用代码切割。还有一点比较特殊的就是我们这边一共有4套模板。在main.js里面尽量少引用插件，会增加公用js的大小。可以将插件在index.html中以script的方式引用

Answer 3

建议看看 webpack 的 treeshake