再见！Webpack，我不会再为按需加载而烦恼！

2023-09-28 18:09:25

随着单页应用发展的越来越庞大，拆分js就是第一要务，拆分后的js，就可以根据我们需求来有选择性的加载了。这里就添加了一句，chunkFilename而已，chunkFilename的作用就是用来给拆分后的chunk们起名字的配置项。还是只打包出了一个main.js，毫无变化…

webpack按需加载的原理

webpack按需加载的原理很简单，它通过将应用程序的代码分成多个独立的模块，然后在需要时再加载这些模块。这样可以避免一次性加载所有代码，从而减少加载时间和提高应用程序的性能。

webpack按需加载的实现方法

webpack按需加载可以通过以下步骤实现：

安装webpack

首先，你需要安装webpack。你可以使用以下命令来安装webpack：

npm install webpack --save-dev

配置webpack

接下来，你需要配置webpack。你可以创建一个webpack配置文件，并将以下内容添加到配置文件中：

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: __dirname + '/dist',
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: 2,
    }),
  ],
};

运行webpack

最后，你可以运行webpack来打包你的应用程序。你可以使用以下命令来运行webpack：

webpack

webpack按需加载的示例代码

以下是一个webpack按需加载的示例代码：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

// src/App.js
import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello, webpack!</h1>
      </div>
    );
  }
}

export default App;