在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ webpack按需加載體積還是太大，該怎么辦啊？

webpack按需加載體積還是太大，該怎么辦??？

同志們，項(xiàng)目需要實(shí)現(xiàn)按需加載來減小首次加載的時(shí)間。
沒有使用按需加載之前是這樣的情況：
antd,echarts等等第三方庫都放在vendor中，最后生成的app.js大約1.6M,vendor.js大約4M。

項(xiàng)目中使用的插件比較多，使用webpack-bundle-analyzer分析工具看了一下，其中antd,echarts,lodash,moment比較大。

PS:以下的效果都是在我的本地執(zhí)行的，沒有使用gzip，所以整體看起來會(huì)比沒有按需加載之前要大。

目前我的解決方案如下：
1：antd使用官網(wǎng)的按需加載，
2：react-router和webpack結(jié)合的按需加載
3：使用new webpack.IgnorePlugin(/^./locale$/, /moment$/)處理了moment是有效的

webpack配置如下:
entry入口:

entry: {
        vendor: ['react','react-dnd',
            'react-dnd-html5-backend','react-dom','react-fetch','react-redux','react-router',
            'superagent','react-router-redux','redux','redux-react-fetch','redux-thunk',
            'history','isomorphic-fetch','js-cookie',
            'lodash','moment','pubsub-js'],
        app: "./src/index",
    }

因?yàn)橄雽?shí)現(xiàn)antd的按需加載，所以我沒有把a(bǔ)ntd放到vendor中，echarts-for-react等其他的插件因?yàn)橛玫降牡胤讲皇呛芏?，所以也沒有放到vendor中。

antd按需加載的配置：

{
      test: /\.js$/,
      loader: require.resolve('babel-loader'),
      options: {
                  plugins: [
                      ['import', { libraryName: 'antd', style: true }],
                  ]
               },
      exclude: /node_modules/,
      include: __dirname
}

我測試過antd的按需加載，應(yīng)該是可以的。我的項(xiàng)目目錄結(jié)構(gòu)如下：
圖片描述

這里有一個(gè)問題:
1：使用react-router懶加載，只能對部分有路由的組件進(jìn)行懶加載，像是component中的組件就只能全部打到app中了。
2：然后antd的按需加載把component中引用的組件全都打包了，導(dǎo)致antd打出的包一直特別大。

路由配置基本如下：

const CodeView = (location, callback) => {
    require.ensure([], require => {
        callback(null, require('./containers/code-files/code-view'))
    }, 'code-view')
};
<Route name="codeView" breadcrumbName="代碼查看" path="code-view" getComponent={CodeView}/>

按需加載沒有完全實(shí)現(xiàn)，這時(shí)候再使用webpack-bundle-analyzer分析，結(jié)果如下，感覺太亂了：
高亮和代碼編輯器單獨(dú)打的包:
高亮和代碼編輯器單獨(dú)打的包

app.js內(nèi)容，我把echarts拿出去了，太大了。
app.js內(nèi)容
vendor.js內(nèi)容，echarts放進(jìn)來了。
vendor.js內(nèi)容

還有一個(gè)整體情況:
整體情況

內(nèi)容有點(diǎn)多，請耐心查看。
打包效果太差了，我是不是哪里寫的有問題??？
剛剛發(fā)現(xiàn)高亮這種多個(gè)地方用到的插件被重復(fù)打包了好幾次:(

回答
編輯回答
奧特蛋

and-mobile 我使用了CDN

2018年4月25日 10:20
編輯回答
玩控

您好，問題解決了嘛

2017年1月26日 18:16
編輯回答
鹿惑

提取一個(gè)vendor.js出來

import 'es6-promise';
import 'react';
import 'react-dom';
import 'prop-types';
import 'react-router';

import 'core-js/library/modules/es6.promise'

// moment還有大量locales文件，待優(yōu)化
import 'moment';

// lodash
import 'lodash.clonedeep'
import 'lodash.isfunction'

import 'jquery-param'
import 'isomorphic-fetch'
import 'redux-saga'
import 'dva';

//  抽取antd組件及樣式
import 'antd/lib/table'
import 'antd/lib/table/style'

import 'antd/lib/select'
import 'antd/lib/select/style'

import 'antd/lib/date-picker'
import 'antd/lib/date-picker/style'

import 'antd/lib/calendar'
import 'antd/lib/calendar/style'

import 'antd/lib/form'
import 'antd/lib/form/style'

import 'antd/lib/transfer'
import 'antd/lib/transfer/style'

import 'antd/lib/modal'
import 'antd/lib/modal/style'

import 'antd/lib/input'
import 'antd/lib/input/style'

import 'antd/lib/tabs'
import 'antd/lib/tabs/style'

import 'antd/lib/tooltip'
import 'antd/lib/tooltip/style'

import 'antd/lib/upload'
import 'antd/lib/upload/style'

import 'antd/lib/popconfirm'
import 'antd/lib/popconfirm/style'

import 'antd/lib/layout'
import 'antd/lib/layout/style'

import 'antd/lib/row'
import 'antd/lib/row/style'

import 'antd/lib/col'
import 'antd/lib/col/style'

import 'antd/lib/switch'
import 'antd/lib/switch/style'

import 'antd/lib/collapse'
import 'antd/lib/collapse/style'

import 'antd/lib/card'
import 'antd/lib/card/style'

import 'antd/lib/steps'
import 'antd/lib/steps/style'

import 'antd/lib/tree'
import 'antd/lib/tree/style'

import 'antd/lib/cascader'
import 'antd/lib/cascader/style'

import 'antd/lib/tag'
import 'antd/lib/tag/style'

import 'antd/lib/message'
import 'antd/lib/message/style'

// 下面這種方式居然不行。。。
// import {Table, Select, DatePicker, Calendar, Form, Transfer, Modal, 
//     Input, Tooltip, Upload, Layout, Row, Col, Tabs, Popconfirm, Menu, message, Dropdown } from 'antd'

// 富文本框
import 'react-quill-img-upload/dist/react-quill.min'
import 'react-quill-img-upload/dist/quill.snow.css';

然后roadhog配置一下

 "entry": {
    "common": "./src/vendor.js",
    "app": "./src/index.js",
  },
  multipage: true,

應(yīng)該就會(huì)小很多，不知道對你有幫助沒

2017年12月24日 08:42
編輯回答
怣人

最終解決完成以后，使用gzip能再壓縮50%以上

2017年1月19日 19:25