webpack按需加載之react實踐

加載項目時,無論那些代碼有沒有執行到，都會下載下來。若是說，咱們只下載咱們須要執行的代碼話，那麼能夠節省至關大的流量。也就是咱們所說的按需加載,這對於大型項目是至關有用的。

基本使用

webpack官網有詳細的介紹，這裏簡單闡述下：

加載函數：

require.ensure(dependencies, callback, chunkName)

這個方法能夠實現js的按需加載，分開打包，webpack管包叫chunk，爲了打包能正常輸出，咱們先給webpack配置文件配置一下chunk文件輸出路徑:

// webpack.config.js
module.exports = {
  ...
  output: {
    ...
    chunkFilename: '[name].[chunkhash:5].chunk.js',
    publicPath: '/dist/'
  }
  ...
}

每一個chunk都會有一個ID，會在webpack內部生成，固然咱們也能夠給chunk指定一個名字，就是require.ensure的第三個參數。

注意： 若是這裏不配置chunkFilename，那麼打包出來的名稱是id加name。

配置文件中

• [name] 默認是 ID，若是指定了chunkName則爲指定的名字。

• [chunkhash] 是對當前chunk 通過hash後獲得的值，能夠保證在chunk沒有變化的時候hash不變，文件不須要更新，chunk變了後，可保證hash惟一，因爲hash太長，這裏截取了hash的5個字符。

demo展現

// a.js
console.log('a');

// b.js
console.log('b');

// c.js
console.log('c');

// entry.js
require.ensure([], () => {
  require('./a')
  require('./b')
}, 'chunk1')

if(false){
  require.ensure([], () => {
    require('./c')
  }, 'chunk2')
}

將會打包出3個文件，基礎包、chunk1 和 chunk2，可是chunk2在if判斷中，並且永遠爲false，因此 chunk2 雖然打包了但永遠不會被加載。

結合 react-router 按需加載

react-router自己有一套動態加載方案。

const CourseRoute = {
  path: 'course/:courseId',

  getChildRoutes(location, callback) {
    require.ensure([], function (require) {
      callback(null, [
        require('./routes/Announcements'),
        require('./routes/Assignments'),
        require('./routes/Grades'),
      ])
    })
  },

  getIndexRoute(location, callback) {
    require.ensure([], function (require) {
      callback(null, require('./components/Index'))
    })
  },

  getComponents(location, callback) {
    require.ensure([], function (require) {
      callback(null, require('./components/Course'))
    })
  }
}

• getChildRoutes

• getIndexRoute

• getComponents

實際操做

const home = (location, callback) => {
  require.ensure([], require => {
    callback(null, require('modules/home'))
  }, 'home')  
}

const blog = (location, callback) => {
  require.ensure([], require => {
    callback(null, require('modules/blog'))
  }, 'blog')  
}

<Router history={history}>
  <Route path="/" component={App}>
    <Route path="home" getComponent={home}></Route>
    <Route path="blog" getComponent={blog}></Route>
  </Route>
</Router>

可否將按需加載抽成公共函數？

答案：不能夠。

由於require函數太特別了，他是webpack底層用於加載模塊，因此必須明確的聲明模塊名，require函數在這裏只能接受字符串，不能接受變量 。

react-router官網案例