# 性能分析
npm install @next/bundle-analyzer
or
yarn add @next/bundle-analyzer
1
2
3
2
3
# 例子
const webpack = require("webpack");
const withCss = require("@zeit/next-css");
const withBunldAnalyzer = require("@zeit/next-bundle-analyzer");
if (typeof require !== "undefined") {
require.extensions[".css"] = (file) => {};
}
module.exports = withBunldAnalyzer(
withCss({
webpack(config) {
config.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
return config;
},
analyzeBrowser: ["browser", "both"].includes(process.env.BUNDLE_ANALYZE),
bundleAnalyzerConfig: {
server: {
analyzerMode: "static",
reportFilename: "../bundles/serve.html",
},
browser: {
analyzerMode: "static",
reportFilename: "../bundles/client.html",
},
},
}),
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
package.json 下添加命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "node server.js",
"mon": "nodemon server.js",
"build": "next build",
"analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build"
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 分析图
