4

我正在构建一个多页应用程序并使用 webpack 来捆绑我的客户端 javascript。

我有以下内容：

webpack.config.js

module.exports = {
  entry: {
    page1: [
      '@babel/polyfill',
      'whatwg-fetch',
      './src/scripts/page1.js'
    ],
    page2: [
      '@babel/polyfill',
      'whatwg-fetch',
      './src/scripts/page2.js'
    ]
  },
  output: {
    filename: './dist/scripts/[name].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.join(__dirname, 'src', 'scripts'),
        use: {loader: 'babel-loader'}
      }
    ]
  }
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      filename: 'common'
    })
  ]
}

page1.html

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
    <!-- some code -->

    <script src="/dist/common.js"></script>
    <script src="/dist/page1.js"></script>
  </body>
</html>

page1.js

import Typed from 'typed'//<- node_modules import
import myLib from './mylib.js'//<- local lib import

// some code

和page2.html和page2.js一样......

这工作得很好

我想优化整个加载时间，并选择我的脚本的异步加载策略，但也要保持我的公共代码拆分以尽可能多地利用浏览器缓存。

理想情况下，我希望配置CommonsChunkPlugin能够做到这一点：

<!DOCTYPE html>
<html>
  <head>
    <!-- old plain synchronous load -->
    <script src="/dist/minimalWebpackSorcellery.js"></script>

    <!-- async load -->
    <script async src="/dist/page1.js"></script>
  </head>

  <body>
    <!-- some code -->
  </body>
</html>

...让插件执行以下操作：

  • 将 webpack 代码提取到一个我可以同步需要的小文件中（我将添加到一个<script>.
  • 提取公共代码，从 webpack 中捆绑，@babel/polyfill但也从 node_module 或本地（我将添加到 async ）中的required 模块typed./myLib.js<script async>
  • 提取特定于条目的代码（通过webPackJsonp要求前一个异步）

这在一个简单的动作中可能吗？

我是否正确，这就是我应该这样做的方式？

我一直在玩async,children和东西，但我无法让它工作

4

0 回答 0