Question

我正在构建一个多页应用程序，并使用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，但require d模块如typed来自node_module或./myLib.js来自本地（我将添加到异步中） <script async>）
提取条目特定代码（异步通过webPackJsonp需要前一个）

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

我是否应该这样做？

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

Webpack生成异步可加载，分割和可缓存的公共代码

webpack.config.js

page1.html

page1.js

0 个答案: