Javascript 包ES6仅在第一次加载时有效-网页包
我基于CSS3/CSS4、HTML5及其API构建了一个包,该包包含101个文件,并使用承诺区分文件并衡量其优先级,在承诺结束时,您可以根据需要启动另一个,格式如下:Javascript 包ES6仅在第一次加载时有效-网页包,javascript,npm,webpack,caching,ecmascript-6,Javascript,Npm,Webpack,Caching,Ecmascript 6,我基于CSS3/CSS4、HTML5及其API构建了一个包,该包包含101个文件,并使用承诺区分文件并衡量其优先级,在承诺结束时,您可以根据需要启动另一个,格式如下: import(/* webpackMode: "lazy-once" */ /* webpackChunkName: "exemple1" */ /* webpackPrefetch: true */ /* webpackPreload: true */ "../module1&q
import(/* webpackMode: "lazy-once" */ /* webpackChunkName: "exemple1" */ /* webpackPrefetch: true */ /* webpackPreload: true */ "../module1").then(exemple1 => {
import(/* webpackMode: "lazy-once" */ /* webpackChunkName: "exemple2" */ /* webpackPrefetch: true */ /* webpackPreload: true */ "../module2").then(exemple2 => {
//code execution or do another import
});
});
模块如下所示:
export default function Exemple1() {
//code
};
new Exemple1()
在没有网页包的情况下,软件包可以完美地工作,有了网页包,它只在第一次访问中工作,在以后的访问中部分工作,经验证,所有模块都出现在源代码图中,但只执行了部分模块,尽管所有模块都是真正必要的,但磁盘上的总非最小化数据包大小为411 kb或652 kb,控制台上未记录任何错误。请参阅配置文件:(不需要依赖项)
Package.json-出于安全原因,省略了名称、说明、版本、主文件和测试文件
{
"private": true,
"mode": "production",
"main": "....",
"name": "....",
"description": "...",
"version": "...",
"scripts": {
"test": "....",
"dev": "npm run development",
"development": "npx webpack",
"watch": "npm watch",
"prod": "npm run production",
"production": "npx webpack"
},
"devDependencies": {
"webpack": "^5.35.0",
"webpack-cli": "^4.6.0"
},
"dependencies": {
"es6-promise": "^4.2.8"
}
}
Webpack.config.js
const path = require('path');
var webpack = require('webpack');
module.exports = {
mode: 'production',
cache: false,
devtool: 'source-map'
}
使用下面的代码尝试减少片段(生成的文件)的数量,但没有解决问题:
module.exports = {
[...]
entry: './main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: 'js/',
filename: 'main.js', library: 'packgeexemple',
sourceMapFilename: '[name].[contenthash].map',
chunkFilename: '[name].[contenthash].js',
libraryTarget: 'window',
libraryExport: 'default',
clean: true,
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 5,
}),
]
}
如何解决这个问题