鍍金池/ 問答/HTML/ ant design pro項目打包后頁面加載緩慢

ant design pro項目打包后頁面加載緩慢

用ant design pro框架做的項目,打包之后每一個頁面加載的速度都特別慢,在.webpackrc里面配置了ignoreMomentLocale: true, disableDynamicImport: false, 進行按需加載還是運行速度緩慢
瀏覽器加載時有個js加載了1s多,打包了以后的js也很大

請教一下大家,怎么做一下打包優(yōu)化,還有頁面性能的問題

clipboard.png
我分析了文件大小,做了公共模塊的的提取 用的是roadhog2.3 打包的時候報錯了
我在.webpackrc里面配置了common

const path = require('path');
let webpack = require('webpack');
export default {
entry: {

'app': './src/index.js',
vendor: [
  'react',
  'react-dom',
  'react-router',
  'moment',
],
antd: [
  'antd/lib/button',
  'antd/lib/card',
  'antd/lib/checkbox',
  'antd/lib/col',
  'antd/lib/row',
  'antd/lib/date-picker',
  'antd/lib/form',
  'antd/lib/icon',
  'antd/lib/input',
  'antd/lib/layout',
  'antd/lib/menu',
  'antd/lib/table',
  'antd/lib/tree-select',
  'antd/lib/tooltip',
],
bizcharts: [
  'bizcharts/lib/components/Axis',
  'bizcharts/lib/components/Chart',
  'bizcharts/lib/components/Geom',
  'bizcharts/lib/components/Guide',
  'bizcharts/lib/components/Label',
  'bizcharts/lib/components/Legend',
  'bizcharts/lib/components/Tooltip',
]

},
// entry: 'src/index.js',
publicPath: process.env.NODE_ENV === 'production' ? '/assets/' : '/',
extraBabelPlugins: [

['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],

],
"env": {

"development": {
  "extraBabelPlugins": ['dva-hmr'],
  "define": {
    "request_root": "api",
    "request_version": "v1"
  }
},
"production": {
  "define": {
    "request_root": "",
    "request_version": "v1"
  },
  "extraBabelPlugins": [ ["transform-remove-console", { "exclude": [ "error", "warn"] }] ],
}

},
alias: {

components: path.resolve(__dirname, 'src/components/'),

},
commons: [

new webpack.optimize.CommonsChunkPlugin({
  names: ['antd', 'vendor', 'bizcharts'],
  minChunks: Infinity
})

],
ignoreMomentLocale: true,
disableDynamicImport: false,
theme: './src/theme.js',
html: {

template: './src/index.ejs',

},
hash: true,
};
打包的時候報錯,

clipboard.png
向大家請教一下,

回答
編輯回答
老梗

大致看了一下,幾乎每一個文件都有BizCharts.jsdata-set.js.

這就會造成代碼被重復加載, 所以至少這點是可以優(yōu)化的,可以將其抽取為common trunk。

如果這樣做還是加載慢,你再繼續(xù)描述你的問題,謝謝~

2017年5月2日 01:22
編輯回答
近義詞

如果js的文件太大,那么你的router配置有問題,從router層就沒有按需處理。
如果js文件不大,頁面顯示還是很慢,那就是你js寫的有問題。

2018年2月26日 08:02