标签: splitchunksplugin

我们有一个传统的服务器渲染应用程序(非SPA),其中每个页面都增加了vuejs

现有的webpack 3配置是

webpack.config.js

var webpack = require('webpack')
var path = require('path')

const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    entry: {
        shared: './shared.js',
        pageA: './pageA.js',
        // pageB: './pageB.js',
        // pageC: './pageC.js',
        // etc
    },

    resolve: {
        alias: { vue: 'vue/dist/vue.esm.js' },
    },

    output: {
        path: path.join(__dirname, './dist'),
        filename: '[name].js',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: ExtractTextPlugin.extract({
                    use: [
                        {
                            loader: 'css-loader',
                            query: {
                                sourceMap: true,
                            },
                        }, …

我想通过以下方式使用 Webpack 分割我的块：

每当我导入 NPM 包时，例如

import styled from "styled-components";

我想要一个像这样的块：

styled-components.[contenthash:5].js  // INCLUDING ITS DEPENDENCIES

这是我正在使用的配置：

webpack.config.js

optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name(module) {
          const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
          return `npm.${packageName.replace('@', '')}`;
        },
      },
    },
  },
}

现在我将每个依赖项styled-components作为不同的块。例如：下面的3个包都是需要的styled-components

理想情况下，我还希望有一个commons或shared块以避免多个模块需要可能的模块。

有人知道该怎么做吗？

我正在尝试按以下方式使用 splitChunks 插件拆分我的 React 代码（使用 create-react-app 创建）：

我有以下组件（JSX）结构：

• 服务
  • 服务A
    • 组分A1
    • 组分A2
    • 子文件夹
      • 组分A3
    • ...
  • 服务B
    • 组件B1
    • 组件B2
    • ...
  • 服务C
    • 组件B1
    • 组件B2
    • ...
  • ...

我想要以下输出（构建）：

• 静态/js
  • 服务A
    • serviceA.bundle.chunkhash.js
  • 服务B
    • serviceB.bundle.chunkhash.js
  • 服务C
    • serviceC.bundle.chunkhash.js

（其他运行时/主电源位于 /static/js 的根目录下）

另一个限制是组件是动态加载的

const Component = lazy(() => import(componentPath));
...
<Suspense fallback={..}>Component</suspense>

“componentPath”是动态确定的（当用户单击图标时，它会打开给定的服务）。

这样做的原因是我想将每个包包含到运行后端的单独 Docker 映像中。然后，由于应用程序路由，每个 Docker 映像都可以访问：

static/js/serviceA/  ==> js served by Docker container running service A
static/js/serviceB/  ==> js served by Docker container running service B
static/js/serviceC/  ==> js served by Docker container running service …

我通过 Rails + Webpacker 将 SplitChunksPlugin 与 Webpack 4 结合使用。

我有一个应用程序，我想将其拆分为多个块 - 除了一个面向公众的入口点，我希望成为一个独立的单个文件。

当我之前使用 CommonsChunkVendor 时，我可以这样做：

var adminEntries = Object.keys(environment.entry).filter(function(e) { return e !== 'app' });

environment.plugins.append(
  'CommonsChunkVendor',
  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    chunks: adminEntries,
    minChunks: (module) => {
      // this assumes your vendor imports exist in the node_modules directory
      return module.context && module.context.indexOf('node_modules') !== -1
    }
  })
)

这将排除“app”入口点被分割。

如何使用 SplitChunksPlugin 实现此目的？

假设我有 3 个由动态导入创建的异步块：

const Notes = lazy(() => import(/* webpackChunkName: "notes" */ 'pages/Notes'))
const Lists = lazy(() => import(/* webpackChunkName: "lists" */ 'pages/Lists'))
const Files = lazy(() => import(/* webpackChunkName: "files" */ 'pages/Files'))

将生成：

notes.g3g43g.js
lists.534535.js
files.234f8t.js

每个块都包含它自己的供应商依赖项。

所以在notes.g3g43g.js里面我们有react-big-calendar和lodash。

但是，当使用 SplitChunksPlugin 时，我们可以将chunks选项设置为all：

optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: ({ context }) => (context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
      }
    }
  }
}

从这一点来看，react-big-calendar和lodash …

我有一个问题,了解Webpack splitChunks插件的行为.我正在研究的是将现有站点上的旧脚本重写为组件并使用Webpack进行捆绑.捆绑只是JS,大多数是在身体的末端加载.但是一个小脚本需要位于页面的标题中,因为它还会在标题和正文中创建很少的全局方法,主要用作内联脚本.由于它用于GA跟踪,它不会改变,事件必须尽快发送.

下面的配置工作适合我,但问题是,为什么它的工作原理只是这样？

确切的问题是在下面的代码中的注释,但我也把它放在这里:我不明白为什么有必要也包括!isUsedInAppHeader在common块的条件.如果没有!isUsedInAppHeader条件,则不会common.header创建块.然后,当我尝试通过为common.header块添加更高优先级来修复它时,它会导致脚本中的脚本异步初始化app.header.js.

异步行为是我根本不理解的,因为它从未发生过app.js.

实际上,我有另一个问题.是否可以导出一个同时立即初始化的公共块？或者你会提出另一个解决方案吗？标题中的脚本无法移动,也必须同步初始化,因为它的主要作用是为GA跟踪创建全局方法,这些方法必须立即用于以下代码中.

谢谢!

Webpack配置:

...
gulp.task('webpack', function(callback) {
    var settings = {
        ...
        entry: {
            'app.header':   './js/app.header.js',
            'app':          './js/app.js',
            ... // page specific files etc.
        },
        ...
        optimization: {
            splitChunks: {
                cacheGroups: {
                    // Node modules used in app.js
                    vendorsApp: {
                        test(module, chunks) {
                            let isInAppEntryPoint = chunks.map(chunk => chunk.name).includes('app');
                            let isNodeModule = /\/node_modules\//.test(upath.normalize(module.resource));
                            return isInAppEntryPoint && …

随着 webpack 4 的引入，splitChunks.name用于定义拆分块的名称。在这里，文档说可以将键映射到用于自定义命名的函数：

https://webpack.js.org/plugins/split-chunks-plugin/#splitchunksname

它接受 params module, chunks, cacheGroupKey。这些参数的文档有点缺乏，但我可以使用一些直觉。即，cacheGroupKey与 中定义的键有关splitChunks.cacheGroups。我认为chunks是共享公共代码的块，它们是cacheGroupKey块的一部分，但在任何地方都没有关于它的官方文档。

所以，我的问题是有人对这三个参数所指的内容有任何见解吗？