啪啪视频91视频,AV99色的

網(wǎng)上拆分js的文章已經(jīng)有很多了。在這針對(duì)項(xiàng)目中拆分js、動(dòng)態(tài)路由、優(yōu)化js加載速度，這三塊內(nèi)容，我就根據(jù)我的經(jīng)驗(yàn)簡單談?wù)劇?/p>

配置文件與優(yōu)化對(duì)比一覽

廢話不說先上package.json看看，看看都有啥包

{
  "name": "***",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "del": "rimraf dist",
    "deln": "rimraf node_modules",
    "biu": "rimraf dist && cross-env NODE_ENV=production webpack  -p --progress --watch --colors",
    "dev": "rimraf dist && cross-env NODE_ENV=development webpack-dev-server",
    "n": "webpack --profile --json > stats.json"
  },
  "author": "***",
  "license": "ISC",
  "dependencies": {
    "D": "^1.0.0",
    "antd": "^2.11.0",
    "axios": "^0.16.2",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-import": "^1.2.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-plugin-transform-proto-to-assign": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "bundle-loader": "^0.5.5",
    "cross-env": "^5.0.0",
    "css-loader": "^0.28.4",
    "echarts": "^3.7.2",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "immutable": "^3.8.1",
    "less": "^2.7.2",
    "less-loader": "^4.0.4",
    "postcss-loader": "^2.0.5",
    "qs": "^6.4.0",
    "rc-banner-anim": "^0.5.16",
    "rc-queue-anim": "^1.3.1",
    "rc-scroll-anim": "^2.0.2",
    "rc-tween-one": "^1.4.5",
    "react": "^15.5.4",
    "react-addons-update": "^15.6.0",
    "react-dom": "^15.5.4",
    "react-file-download": "^0.3.4",
    "react-hot-loader": "^1.3.1",
    "react-redux": "^5.0.5",
    "react-router": "^4.1.1",
    "react-router-config": "^1.0.0-beta.3",
    "react-router-dom": "^4.1.1",
    "react-router-redux": "^4.0.8",
    "react-sk-countdown": "^1.0.2",
    "redux": "^3.6.0",
    "redux-immutable": "^4.0.0",
    "redux-persist": "^4.8.1",
    "redux-persist-immutable": "^4.3.0",
    "redux-promise-middleware": "^4.2.1",
    "redux-reset": "^0.3.0",
    "redux-saga": "^0.15.3",
    "redux-thunk": "^2.2.0",
    "style-loader": "^0.18.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.6.1",
    "webpack-bundle-analyzer": "^2.9.1",
    "webpack-dev-server": "^2.4.5"
  },
  "devDependencies": {
    "compression-webpack-plugin": "^1.0.1"
  }
}

Webpack 配置文件

const path = require('path');
const webpack = require('webpack');
// 拆 css
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// gzip 壓縮
const CompressionPlugin = require('compression-webpack-plugin');
// bundle 大小分析
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
// 開發(fā)模式
// const DEV = process.env.NODE_ENV === 'development';
// 生產(chǎn)模式
const PROD = process.env.NODE_ENV === 'production';
// 只有在開發(fā)模式下啟用 source-map
const devtool = PROD ? false : "source-map";
// 指定 filename
const filename = PROD ? '[name].js' : 'bundle.js';
// 提取項(xiàng)目內(nèi)的公共 js
const entry = PROD ? {
        bundle: './src/index.js',
        eTooltip: 'echarts/lib/component/tooltip',
        eGrid: 'echarts/lib/component/grid',
        eLine: 'echarts/lib/chart/line',
        eTitle: 'echarts/lib/component/title',
        babelPolyfill: 'babel-polyfill',
        constants: ['./src/constants/statusCode.js', './src/constants/sysConstants.js', './src/constants/url.js'],
        cjs: ['./src/js/globalJs.js','./src/js/HocHidden.js','./src/js/msgReducer.js','./src/js/requestUtil.js','./src/js/sagaUtil.js','./src/js/sysMsgUtil.js','./src/js/uploadUtil.js'],
        area: './src/routes/po/components/Area.js',
        aTable: 'antd/lib/table',
        aDatePicker: 'antd/lib/date-picker'
    } : [
        './src/index.js',
    ];
// 提取項(xiàng)目中 css
const extractCSS = new ExtractTextPlugin('stylesheets/[name]-one.css');
// 提取項(xiàng)目中 less
const extractLESS = new ExtractTextPlugin('stylesheets/[name]-two.css');
const plugins = PROD ? [
        // 導(dǎo)出 css
        extractCSS,
        // 導(dǎo)出 less
        extractLESS,
        // 提取公共 js
        new webpack.optimize.CommonsChunkPlugin({
            names:['aDatePicker', 'aTable', 'area', 'cjs', 'constants', 'babelPolyfill', 'eTooltip', 'eGrid', 'eLine', 'eTitle'],
            filename:"js/CommonsLibs/[name].chunk.js",
            minChunks: Infinity
        }),
        // 丑化js
        new webpack.optimize.UglifyJsPlugin({
            minimize: true,
            mangle: false,
            output: {
                // 最緊湊的輸出
                beautify: false,
                // 去掉注釋
                comments: false,
                screw_ie8: false
            },
            compress: {
                warnings: false,
                // 刪除conslos.*
                drop_console: true,
            },
            warnings: false
        }),
        // 設(shè)置此模式為生產(chǎn)模式
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        }),
        // gzip 壓縮
        new CompressionPlugin({
            asset: "[path].gz[query]",
            algorithm: "gzip",
            test: /\.js$|\.css$|\.html$/,
            threshold: 10240,
            minRatio: 0.8
        })
        // new BundleAnalyzerPlugin()
    ] : [
        // 設(shè)置此模式為開發(fā)模式
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ];
const cssIdentName = PROD ? '[hash:base64:10]' : '[path][name]-[local]-[hash:base64:24]';
const cssLoader = PROD ?
    extractCSS.extract({
        fallbackLoader: "style-loader",
        loader: 'css-loader?localIdentName=' + cssIdentName
    })
    : [
        'style-loader', 'css-loader?localIdentName=' + cssIdentName
    ];
const lessLoader = PROD ?
    extractLESS.extract({
        fallback: "style-loader",
        use: [{
            loader: 'css-loader'
        }, {
            // modifyVars 更改全局樣式
            loader: 'less-loader?{modifyVars:{"@primary-color":"#0d85db", "@font-size-base":"12px"}}'
        }]
    })
    : ['style-loader', 'css-loader', 'less-loader?{modifyVars:{"@primary-color":"#0d85db", "@font-size-base":"12px"}}'];

module.exports = {
    devtool: devtool,
    entry: entry,
    output: {
        // 打包文件名
        filename: filename,
        // bundle.js 輸出路徑,是一個(gè)絕對(duì)路徑
        path: path.join(__dirname, 'dist'),
        // 在 html 頁面中需要的導(dǎo)入資源的路徑
        publicPath: '/dist/',
        // 設(shè)置按需加載 js 的名文件名
        chunkFilename: "[name].[hash:8].chunk.js"
    },
    plugins: plugins,
    module: {
        rules:[
            // 解析裝載 js
            {
                test: /\.(js|jsx)$/,
                exclude: '/node_modules/',
                loader: 'babel-loader',
                query: {
                    // 加入 antd 模塊，并使支持 less
                    plugins: [
                        ['import', [{libraryName: 'antd', style: true}]], // antd 按需引入
                        ["transform-decorators-legacy"], // redux @connect
                    ],
                    cacheDirectory: true,
                },
            },
            // 解析裝載圖片，等文件
            {
                test: /\.(jpg|gif|png)$/,
                exclude: '/node_modules/',
                // loader: 'file-loader'
                loader: 'url-loader?limit=512&name=[path][name].[ext]?[hash]',
            },
            // 解析裝載 css
            {
                test: /\.css$/,
                exclude: '/node_modules/',
                use: cssLoader,
            },
            // 解析裝載 less
            {
                test: /\.less$/,
                exclude: '/node_modules/',
                use: lessLoader,

            },
            // 解析 iconfont
            {
                test:/\.(woff|eot|svg|ttf|ppt|pdf|doc)\??.*$/,
                loader:"url-loader?name=fonts/[name].[md5:hash:hex:7].[ext]"
            }
        ]
    },
    // 剔除的js生產(chǎn)環(huán)境時(shí)需要從 cdn 引入
    externals: PROD ? {
            'react': 'React',
            'react-dom': 'ReactDOM',
            "react-router": "ReactRouter",
            'redux': 'Redux',
            'react-redux': 'ReactRedux',
            'immutable': 'Immutable',
            'moment': 'moment',
            'moment/locale/zh-cn' : 'moment.locale',
        } : {},
    devServer: {
        host: '0.0.0.0',
        port: 8080,
        // hot: true,
        publicPath: '/dist/',
        stats: {
            colors: true
        },
        inline: true,
        // 代理
        /*proxy: {
         '/api': {
         target: 'http://192.168.1.249:8000',
         changeOrigin: true,
         secure: false,
         }
         },*/
        historyApiFallback: true,
        disableHostCheck:true,
        // contentBase: './',
    },
    performance: {
        hints: false,
    },
    cache: false,
};

拆分JS前，打包出來的JS文件

  Asset       Size  Chunks                    Chunk Names
                                             NoMatch.b15e9476.chunk.js    3.11 kB       3  [emitted]         NoMatch
    src/routes/home/assets/banner.jpg?5fdef1dca3b20a658d6d87b312362522     124 kB          [emitted]
      src/routes/home/assets/head.png?0bd162dda92de9f3eb8a4dcea472d6da    6.55 kB          [emitted]
   src/routes/loginHome/assets/bg.jpg?535455e0d36d4ee16ffee51706e3284e     299 kB          [emitted]  [big]
 src/routes/loginHome/assets/logo.png?09a31bb3dbdb670d09c26d4ab5ed454a    14.7 kB          [emitted]
src/routes/loginHome/assets/title.png?03304e154d5eb5fa40586a6dbd293157    16.9 kB          [emitted]
                                               index.b15e9476.chunk.js     181 kB       0  [emitted]         index
                                          InOutMoney.b15e9476.chunk.js    32.7 kB       1  [emitted]         InOutMoney
                                       WalletMessage.b15e9476.chunk.js    8.01 kB       2  [emitted]         WalletMessage
   src/routes/home/assets/banner2.jpg?721a5e7b892c79514d6ee772a9438003     136 kB          [emitted]
                                         NoAuthority.b15e9476.chunk.js    3.08 kB       4  [emitted]         NoAuthority
                                                             bundle.js    8.41 MB       5  [emitted]  [big]  main
                                           index.b15e9476.chunk.js.map     245 kB       0  [emitted]         index
                                      InOutMoney.b15e9476.chunk.js.map    21.6 kB       1  [emitted]         InOutMoney
                                   WalletMessage.b15e9476.chunk.js.map     4.1 kB       2  [emitted]         WalletMessage
                                         NoMatch.b15e9476.chunk.js.map  724 bytes       3  [emitted]         NoMatch
                                     NoAuthority.b15e9476.chunk.js.map  813 bytes       4  [emitted]         NoAuthority
                                                         bundle.js.map    11.8 MB       5  [emitted]         main

拆分JS后，打包出來的JS文件

 Asset     Size  Chunks                    Chunk Names
                                 js/CommonsLibs/babelPolyfill.chunk.js  92.9 kB      65  [emitted]         babelPolyfill
      src/routes/home/assets/head.png?0bd162dda92de9f3eb8a4dcea472d6da  6.55 kB          [emitted]
   src/routes/home/assets/banner2.jpg?721a5e7b892c79514d6ee772a9438003   136 kB          [emitted]
   src/routes/loginHome/assets/bg.jpg?535455e0d36d4ee16ffee51706e3284e   299 kB          [emitted]  [big]
 src/routes/loginHome/assets/logo.png?09a31bb3dbdb670d09c26d4ab5ed454a  14.7 kB          [emitted]
src/routes/loginHome/assets/title.png?03304e154d5eb5fa40586a6dbd293157  16.9 kB          [emitted]
                                             NoMatch.dac1ea70.chunk.js   1.4 kB       0  [emitted]         NoMatch
                                                Home.dac1ea70.chunk.js   145 kB       1  [emitted]         Home
                                               index.dac1ea70.chunk.js   112 kB       2  [emitted]         index
                                            LrPayoff.dac1ea70.chunk.js    81 kB       3  [emitted]         LrPayoff
                                           PurCreate.dac1ea70.chunk.js  72.2 kB       4  [emitted]         PurCreate
                                          SCMaintain.dac1ea70.chunk.js  57.5 kB       5  [emitted]         SCMaintain
                                         SellReceipt.dac1ea70.chunk.js  47.6 kB       6  [emitted]         SellReceipt
                                  SCMaintainBaseInfo.dac1ea70.chunk.js  48.7 kB       7  [emitted]         SCMaintainBaseInfo
                                             ViewSto.dac1ea70.chunk.js  50.4 kB       8  [emitted]         ViewSto
                                       LoanRepayment.dac1ea70.chunk.js  59.6 kB       9  [emitted]         LoanRepayment
                                                Loan.dac1ea70.chunk.js    56 kB      10  [emitted]         Loan
                                                 Pur.dac1ea70.chunk.js  54.3 kB      11  [emitted]         Pur
                                                Func.dac1ea70.chunk.js  70.8 kB      12  [emitted]         Func
                                          SIMaintain.dac1ea70.chunk.js  45.1 kB      13  [emitted]         SIMaintain
                                                User.dac1ea70.chunk.js  29.2 kB      14  [emitted]         User
                                           UserGroup.dac1ea70.chunk.js  28.1 kB      15  [emitted]         UserGroup
                                        SysParameter.dac1ea70.chunk.js  26.3 kB      16  [emitted]         SysParameter
                                                Role.dac1ea70.chunk.js  42.8 kB      17  [emitted]         Role
                                          FBMaintain.dac1ea70.chunk.js  37.3 kB      18  [emitted]         FBMaintain
                                    BorrowerMaintain.dac1ea70.chunk.js  42.6 kB      19  [emitted]         BorrowerMaintain
                                      PurVendorAudit.dac1ea70.chunk.js  36.8 kB      20  [emitted]         PurVendorAudit
                                     PurStoreConfirm.dac1ea70.chunk.js  37.1 kB      21  [emitted]         PurStoreConfirm
                                          PurSoldOut.dac1ea70.chunk.js  37.2 kB      22  [emitted]         PurSoldOut
                                           PurRefuse.dac1ea70.chunk.js  31.6 kB      23  [emitted]         PurRefuse
                                    PurPlatformAudit.dac1ea70.chunk.js  34.8 kB      24  [emitted]         PurPlatformAudit
                                       PurObligation.dac1ea70.chunk.js  32.7 kB      25  [emitted]         PurObligation
                                     PurFundShortage.dac1ea70.chunk.js    33 kB      26  [emitted]         PurFundShortage
                                     PurDropShipping.dac1ea70.chunk.js  35.5 kB      27  [emitted]         PurDropShipping
                                         PurComplete.dac1ea70.chunk.js  32.2 kB      28  [emitted]         PurComplete
                                           PurCancel.dac1ea70.chunk.js  31.2 kB      29  [emitted]         PurCancel
                                    LoanStoreConfirm.dac1ea70.chunk.js  33.5 kB      30  [emitted]         LoanStoreConfirm
                                      LoanForLending.dac1ea70.chunk.js    31 kB      31  [emitted]         LoanForLending
                                          LoanCancel.dac1ea70.chunk.js    31 kB      32  [emitted]         LoanCancel
                                     LoanBeenLending.dac1ea70.chunk.js    31 kB      33  [emitted]         LoanBeenLending
                                       LoanBankAudit.dac1ea70.chunk.js    31 kB      34  [emitted]         LoanBankAudit
                                          LoanCreate.dac1ea70.chunk.js  36.2 kB      35  [emitted]         LoanCreate
                                  SIMaintainBaseInfo.dac1ea70.chunk.js  33.5 kB      36  [emitted]         SIMaintainBaseInfo
                            BorrowerMaintainBaseInfo.dac1ea70.chunk.js  32.3 kB      37  [emitted]         BorrowerMaintainBaseInfo
                                          WalletFund.dac1ea70.chunk.js  23.8 kB      38  [emitted]         WalletFund
                                   LogOperationTable.dac1ea70.chunk.js    16 kB      39  [emitted]         LogOperationTable
                                     ReceivedPayment.dac1ea70.chunk.js  12.9 kB      40  [emitted]         ReceivedPayment
                                            PayMoney.dac1ea70.chunk.js    14 kB      41  [emitted]         PayMoney
                                       ResetPassword.dac1ea70.chunk.js    11 kB      42  [emitted]         ResetPassword
                                            CheckSto.dac1ea70.chunk.js    15 kB      43  [emitted]         CheckSto
                                        BankMaintain.dac1ea70.chunk.js  11.9 kB      44  [emitted]         BankMaintain
                                          BBMaintain.dac1ea70.chunk.js  12.9 kB      45  [emitted]         BBMaintain
                                          WKMaintain.dac1ea70.chunk.js  7.42 kB      46  [emitted]         WKMaintain
                                          InOutMoney.dac1ea70.chunk.js  8.02 kB      47  [emitted]         InOutMoney
                                     StoreAdjustment.dac1ea70.chunk.js  10.1 kB      48  [emitted]         StoreAdjustment
                                 InitialStoreBalance.dac1ea70.chunk.js  8.43 kB      49  [emitted]         InitialStoreBalance
                                          SWMaintain.dac1ea70.chunk.js  11.2 kB      50  [emitted]         SWMaintain
                                       WalletMessage.dac1ea70.chunk.js  2.58 kB      51  [emitted]         WalletMessage
                                              Wallet.dac1ea70.chunk.js  2.53 kB      52  [emitted]         Wallet
                                     StoreSellOutSto.dac1ea70.chunk.js   4.9 kB      53  [emitted]         StoreSellOutSto
                               StoreAdjustmentDetail.dac1ea70.chunk.js  5.32 kB      54  [emitted]         StoreAdjustmentDetail
                                    SalesOutstanding.dac1ea70.chunk.js  1.39 kB      55  [emitted]         SalesOutstanding
                                      FlatSellOutSto.dac1ea70.chunk.js  4.66 kB      56  [emitted]         FlatSellOutSto
                                         NoAuthority.dac1ea70.chunk.js  1.37 kB      57  [emitted]         NoAuthority
                                BankMaintainBaseInfo.dac1ea70.chunk.js  4.08 kB      58  [emitted]         BankMaintainBaseInfo
                                  BBMaintainBaseInfo.dac1ea70.chunk.js  4.65 kB      59  [emitted]         BBMaintainBaseInfo
                                   ToBeAssignedStore.dac1ea70.chunk.js  5.44 kB      60  [emitted]         ToBeAssignedStore
                                     StoreAllotClerk.dac1ea70.chunk.js  5.32 kB      61  [emitted]         StoreAllotClerk
                                          SBMaintain.dac1ea70.chunk.js  4.95 kB      62  [emitted]         SBMaintain
                                  BorrowerAllotStore.dac1ea70.chunk.js  6.64 kB      63  [emitted]         BorrowerAllotStore
                                                             bundle.js   521 kB      64  [emitted]  [big]  bundle
    src/routes/home/assets/banner.jpg?5fdef1dca3b20a658d6d87b312362522   124 kB          [emitted]
                                           js/CommonsLibs/cjs.chunk.js    89 kB      66  [emitted]         cjs
                                        js/CommonsLibs/aTable.chunk.js   231 kB      67  [emitted]         aTable
                                   js/CommonsLibs/aDatePicker.chunk.js   109 kB      68  [emitted]         aDatePicker
                                         js/CommonsLibs/eLine.chunk.js  42.5 kB      69  [emitted]         eLine
                                         js/CommonsLibs/eGrid.chunk.js  16.2 kB      70  [emitted]         eGrid
                                     js/CommonsLibs/constants.chunk.js  22.9 kB      71  [emitted]         constants
                                      js/CommonsLibs/eTooltip.chunk.js  11.9 kB      72  [emitted]         eTooltip
                                          js/CommonsLibs/area.chunk.js  97.6 kB      73  [emitted]         area
                                        js/CommonsLibs/eTitle.chunk.js   220 kB      74  [emitted]         eTitle
                                            stylesheets/bundle-two.css   295 kB      64  [emitted]  [big]  bundle
                                               stylesheets/cjs-two.css    30 kB      66  [emitted]         cjs
                                      SellReceipt.dac1ea70.chunk.js.gz  13.3 kB          [emitted]
                               SCMaintainBaseInfo.dac1ea70.chunk.js.gz  13.6 kB          [emitted]
                                          ViewSto.dac1ea70.chunk.js.gz  13.3 kB          [emitted]
                                             Loan.dac1ea70.chunk.js.gz  14.5 kB          [emitted]
                                    LoanRepayment.dac1ea70.chunk.js.gz  14.2 kB          [emitted]
                                              Pur.dac1ea70.chunk.js.gz  14.4 kB          [emitted]
                                       SIMaintain.dac1ea70.chunk.js.gz  11.9 kB          [emitted]
                                             User.dac1ea70.chunk.js.gz  8.29 kB          [emitted]
                                        UserGroup.dac1ea70.chunk.js.gz  7.67 kB          [emitted]
                                     SysParameter.dac1ea70.chunk.js.gz  7.52 kB          [emitted]
                                       FBMaintain.dac1ea70.chunk.js.gz  10.3 kB          [emitted]
                                             Role.dac1ea70.chunk.js.gz  11.2 kB          [emitted]
                                 BorrowerMaintain.dac1ea70.chunk.js.gz  11.6 kB          [emitted]
                                   PurVendorAudit.dac1ea70.chunk.js.gz  8.35 kB          [emitted]
                                  PurStoreConfirm.dac1ea70.chunk.js.gz  8.46 kB          [emitted]
                                       PurSoldOut.dac1ea70.chunk.js.gz  8.32 kB          [emitted]
                                        PurRefuse.dac1ea70.chunk.js.gz   7.2 kB          [emitted]
                                 PurPlatformAudit.dac1ea70.chunk.js.gz  8.12 kB          [emitted]
                                    PurObligation.dac1ea70.chunk.js.gz  7.54 kB          [emitted]
                                  PurDropShipping.dac1ea70.chunk.js.gz  8.21 kB          [emitted]
                                  PurFundShortage.dac1ea70.chunk.js.gz  7.67 kB          [emitted]
                                      PurComplete.dac1ea70.chunk.js.gz  7.34 kB          [emitted]
                                        PurCancel.dac1ea70.chunk.js.gz   7.1 kB          [emitted]
                                 LoanStoreConfirm.dac1ea70.chunk.js.gz  7.63 kB          [emitted]
                                   LoanForLending.dac1ea70.chunk.js.gz  7.16 kB          [emitted]
                                       LoanCancel.dac1ea70.chunk.js.gz  7.14 kB          [emitted]
                                    LoanBankAudit.dac1ea70.chunk.js.gz  7.14 kB          [emitted]
                                  LoanBeenLending.dac1ea70.chunk.js.gz  7.14 kB          [emitted]
                                       LoanCreate.dac1ea70.chunk.js.gz  9.25 kB          [emitted]
                               SIMaintainBaseInfo.dac1ea70.chunk.js.gz  9.14 kB          [emitted]
                         BorrowerMaintainBaseInfo.dac1ea70.chunk.js.gz  9.03 kB          [emitted]
                                       WalletFund.dac1ea70.chunk.js.gz  5.75 kB          [emitted]
                                LogOperationTable.dac1ea70.chunk.js.gz  5.42 kB          [emitted]
                                         PayMoney.dac1ea70.chunk.js.gz  4.45 kB          [emitted]
                                  ReceivedPayment.dac1ea70.chunk.js.gz   4.2 kB          [emitted]
                                    ResetPassword.dac1ea70.chunk.js.gz  4.23 kB          [emitted]
                                         CheckSto.dac1ea70.chunk.js.gz  3.84 kB          [emitted]
                                     BankMaintain.dac1ea70.chunk.js.gz  3.87 kB          [emitted]
                                  StoreAdjustment.dac1ea70.chunk.js.gz  3.35 kB          [emitted]
                                       BBMaintain.dac1ea70.chunk.js.gz  4.22 kB          [emitted]
                                       SWMaintain.dac1ea70.chunk.js.gz  3.23 kB          [emitted]
                                      js/CommonsLibs/eGrid.chunk.js.gz  6.22 kB          [emitted]
                                   js/CommonsLibs/eTooltip.chunk.js.gz  4.48 kB          [emitted]
                                  js/CommonsLibs/constants.chunk.js.gz  5.26 kB          [emitted]
                                      js/CommonsLibs/eLine.chunk.js.gz  15.1 kB          [emitted]
                                            stylesheets/cjs-two.css.gz  5.52 kB          [emitted]
                                            index.dac1ea70.chunk.js.gz  31.3 kB          [emitted]
                                         LrPayoff.dac1ea70.chunk.js.gz    20 kB          [emitted]
                                        PurCreate.dac1ea70.chunk.js.gz  18.3 kB          [emitted]
                                       SCMaintain.dac1ea70.chunk.js.gz  16.4 kB          [emitted]
                                             Func.dac1ea70.chunk.js.gz  19.8 kB          [emitted]
                              js/CommonsLibs/babelPolyfill.chunk.js.gz  29.5 kB          [emitted]
                                js/CommonsLibs/aDatePicker.chunk.js.gz  24.3 kB          [emitted]
                                        js/CommonsLibs/cjs.chunk.js.gz  27.4 kB          [emitted]
                                             Home.dac1ea70.chunk.js.gz  39.2 kB          [emitted]
                                       js/CommonsLibs/area.chunk.js.gz  26.5 kB          [emitted]
                                     js/CommonsLibs/aTable.chunk.js.gz  60.7 kB          [emitted]
                                         stylesheets/bundle-two.css.gz  52.9 kB          [emitted]
                                     js/CommonsLibs/eTitle.chunk.js.gz  75.4 kB          [emitted]
                                                          bundle.js.gz   106 kB          [emitted]

結(jié)論

拿bundle.js舉例說明，可以說拆分JS后效果十分明顯。在開啟gzip壓縮后，效果更是明顯。部署在阿里云1M帶寬下的展現(xiàn)。

JS 名稱	拆分前 JS 大小 (MB)	拆分后未壓縮JS 大小 (kb)	拆分壓縮后 JS 大小 (kb)	拆分前加載速度 (s)	拆分壓縮后加載速度 (s)
bundle.js	8.41	521	106	10-30	2以內(nèi)

再進(jìn)行優(yōu)化前的建議

優(yōu)化前大家先分析一下項(xiàng)目中bundle.js的組成成分。那么首先介紹2種工具

webpack-chart 可以大致了解下，各個(gè)JS的大小以及分布情況
重點(diǎn)推薦webpack-bundle-analyzer插件通過 npm安裝具體安裝方式不復(fù)述了。
使用方法：
具體請(qǐng)看上面webpack配置文件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

plugins: new BundleAnalyzerPlugin() // 具體請(qǐng)看上面webpack配置文件

插件加進(jìn)去后，啟動(dòng)自動(dòng)會(huì)彈出一個(gè)網(wǎng)頁，詳細(xì)的告訴你，你每個(gè)JS下都由什么JS組成的大小是多少，根據(jù)該圖可以很容易進(jìn)行優(yōu)化拆分工作。

webpack-bundle-analyzer 插件所提供的功能

如何使用 Webpack 拆分 JS

正如前面給出的Webpack配置文件，關(guān)于Webpack配置文件的配置這里就不細(xì)說了。

采用 CommonsChunkPlugin 插件 為了提取公共JS
ExtractTextPlugin 插件 為了把公共的CSS、LESS從JS中提取出來進(jìn)一步減少JS的大小
externals 屬性 剔除不需要打包的JS從cdn中引用，達(dá)到節(jié)約帶寬的目的

如何使用 react-router 動(dòng)態(tài)路由

我用的是react-router@4，版本4以下的請(qǐng)繞行。采用該團(tuán)隊(duì)提供的bundle-loader包，可以到達(dá)動(dòng)態(tài)路由的效果。

安裝 npm i D bundle-loader
在此基礎(chǔ)上我又封裝了一個(gè)方法，如果組件正常加載則加載，如果沒有顯示一個(gè)正在加載的組件

export const createComponent = (component) => () => (
    <Bundle load={component}>
        {
            (Component) => Component ? <Component /> : <Loading />
        }
    </Bundle>
);

在路由配置JS文件導(dǎo)入某個(gè)組件

import ViewSto from "bundle-loader?lazy&name=ViewSto!../routes/sto/components/ViewSto";

在路由配置JS文件中使用該組件

<Route path="/appLayout/viewSto" component={createComponent(ViewSto)} />

至此動(dòng)態(tài)路由配置完成。

如何優(yōu)化 JS 加載速度

正如前面給出的Webpack配置文件

UglifyJsPlugin 丑化JS 具體配置請(qǐng)參照我上面給出的例子，具體參數(shù)請(qǐng)看這里
CompressionPlugin 進(jìn)一步減小JS的大小，壓縮JS，具體參數(shù)請(qǐng)看這里

關(guān)于被拆分、剔除出來的 JS 在 HTML 中的引用順序

如果引用順序不對(duì)會(huì)在訪問時(shí)報(bào)錯(cuò)，不能正常加載首頁內(nèi)容。它們的順序應(yīng)該是根據(jù)Webpack 配置文件中的CommonsChunkPlugin插件names屬性中定義抽取公共JS名稱數(shù)組，順序從后往前依次遞增。例如：

new webpack.optimize.CommonsChunkPlugin({
            names:['aDatePicker', 'aTable', 'area', 'cjs', 'constants', 'babelPolyfill', 'eTooltip', 'eGrid', 'eLine', 'eTitle'],
            filename:"js/CommonsLibs/[name].chunk.js",
            minChunks: Infinity
}),

HTML 中引用JS的順序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>***</title>
    <link rel="stylesheet" href="/dist/stylesheets/cjs-two.css" />
    <link rel="stylesheet" href="/dist/stylesheets/bundle-two.css" />

</head>
<body>
<div id="app">
    <script src="https://cdn.bootcss.com/react/15.5.4/react.min.js"></script>
    <script src="https://cdn.bootcss.com/react/15.5.4/react-dom.min.js"></script>
    <script src="https://cdn.bootcss.com/react-router/4.1.1/react-router.min.js"></script>
    <script src="https://cdn.bootcss.com/redux/3.6.0/redux.min.js"></script>
    <script src="https://cdn.bootcss.com/react-redux/5.0.5/react-redux.min.js"></script>
    <script src="https://cdn.bootcss.com/immutable/3.8.1/immutable.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.19.3/moment.min.js"></script>
    <script src="https://cdn.bootcss.com/moment.js/2.19.3/locale/zh-cn.js"></script>
    <script src="/dist/js/CommonsLibs/eTitle.chunk.js"></script>
    <script src="/dist/js/CommonsLibs/eLine.chunk.js"></script>
    <script src="/dist/js/CommonsLibs/eGrid.chunk.js"></script>
    <script src="/dist/js/CommonsLibs/eTooltip.chunk.js"></script>
    <script src="/dist/js/CommonsLibs/babelPolyfill.chunk.js"></script>
    <script src="/dist/js/CommonsLibs/constants.chunk.js"></script>
    <script src="/dist/js/CommonsLibs/cjs.chunk.js"></script>
    <script src="/dist/js/CommonsLibs/area.chunk.js"></script>
    <script src="/dist/js/CommonsLibs/aTable.chunk.js"></script>
    <script src="/dist/js/CommonsLibs/aDatePicker.chunk.js"></script>
    <script src="/dist/bundle.js"></script>
</div>
</body>
</html>

實(shí)際請(qǐng)求

反向代理使用nginx，使用nginx開啟gzip功能具體可以自行查閱這里就不復(fù)述了。

至此全文完畢。如果還有更好的提議或者問題請(qǐng)留言多謝。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Webpack 拆分 JS，react-router 動(dòng)態(tài)路由，優(yōu)化 JS 加載速度

Webpack 拆分 JS，react-router 動(dòng)態(tài)路由，優(yōu)化 JS 加載速度

配置文件與優(yōu)化對(duì)比一覽

結(jié)論

再進(jìn)行優(yōu)化前的建議

如何使用 Webpack 拆分 JS

如何使用 react-router 動(dòng)態(tài)路由

如何優(yōu)化 JS 加載速度

關(guān)于被拆分、剔除出來的 JS 在 HTML 中的引用順序

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

Webpack 拆分 JS，react-router 動(dòng)態(tài)路由，優(yōu)化 JS 加載速度

配置文件與優(yōu)化對(duì)比一覽

結(jié)論

再進(jìn)行優(yōu)化前的建議

如何使用 Webpack 拆分 JS

如何使用 react-router 動(dòng)態(tài)路由

如何優(yōu)化 JS 加載速度

關(guān)于被拆分、剔除出來的 JS 在 HTML 中的引用順序

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Webpack 拆分 JS，react-router 動(dòng)態(tài)路由，優(yōu)化 JS 加載速度