12

我们有一个传统的服务器渲染应用程序（非 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,
                            },
                        },
                    ],
                }),
            },
        ],
    },

    plugins: [
        new CleanWebpackPlugin('./dist'),

        new webpack.optimize.CommonsChunkPlugin({
            name: ['shared'],
            minChunks: Infinity,
        }),

        new webpack.optimize.CommonsChunkPlugin({
            name: 'runtime',
        }),

        new ExtractTextPlugin('[name].css'),

        new CopyWebpackPlugin([{ from: 'index.html', to: '.' }]),
    ],
}

shared.js

// import shared dependencies & pollyfills
var vue = require('vue')

// import global site css file
require('./shared.css')

// initialize global defaults
// vue.setDefaults(...)

console.log('shared', { vue })

pageA.js

var vue = require('vue')

// only this page uses axios
var axios = require('axios')

console.log('pageA', { vue, axios })

shared.css

body {
    background-color: aquamarine;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- included on every page-->
    <link rel="stylesheet" href="shared.css">
</head>
<body>
    <!-- included on every page-->
    <script src="runtime.js"></script>
    <script src="shared.js"></script>

    <script src="pageA.js"></script>
</body>
</html>

有了这个设置

1)runtime.js包含 webpack 加载器，因此任何更改shared.js都不会导致pageA.js缓存被破坏，反之亦然

2)shared.js包含任何共享依赖项（在这种情况下vue）以及每个页面的任何共享全局初始化（设置vue默认值等）。这也是我们导入共享的全局 css 文件的重点。

3)pageA.js不包含任何导入的依赖项shared.js（vue在这种情况下），但确实包含它导入的依赖项（axios在这种情况下）。

我们无法使用SplitChunksPlugin

1)SplitChunksPlugin似乎不允许将入口点作为分割点。

2) 所有示例都将所有节点模块依赖项拆分为供应商块。这对我们不起作用，因为我们有 100 个页面，但只有少数导入图形库或时刻等...我们不希望包含此图形库或时刻，shared.js因为它将被加载到所有页面.

3) 也不清楚如何将运行时拆分为自己的文件

SplitChunksPlugin似乎针对可以按需加载javascript的SPA。我们正在追踪的场景是否仍然受支持？

4

2 回答 2

3

您是否正在尝试迁移到 webpack 4？

我发现optimisation cacheGroups test option作品很好地具体说明了去哪里。

optimization: {
  splitChunks: {
    cacheGroups: {
      shared: {
        test: /node_modules[\\/](?!axios)/,
        name: "shared",
        enforce: true,
        chunks: "all"
      }
    }
  }
}

将从节点模块（axios 除外）加载所有内容，因此应作为页面入口点的一部分包含在内。

于 2018-09-20T13:22:22.440 回答
0

如果你想让 webpack 分块一些组件，你需要从你的主入口文件异步导入它。我一直在使用 bundle-loader 来做，然后我有：

在我的 webpack.config.js

optimization: {
  splitChunks: {
    chunks: 'all'
  },
  mergeDuplicateChunks: true,
}
module: {
  rules: [
    {
      test: /\.bundle\.js$/, //yes my output file contains the bundle in its name
      use: {
        loader: 'bundle-loader', options: {lazy: true}
      }
    }
  ]
}

在我的入口文件中。

//this code will replace the line where you are importing this component
let Login;

// this method will go inside your component
componentWillMount() {
    require("bundle-loader!./ui/Login.jsx")((loginFile) => {
        Login = loginFile.default;
        this.setState({ loginLoaded: true });
    });
}

如果您不想使用它，还有更多异步导入文件的方法。

于 2018-09-21T04:24:20.020 回答