Cesium + webpack 体验

简介

熟悉 Cesium 中提到的 webpack 命令，以及研究如何将 cesium 添加到项目中

官方文章
https://cesium.com/docs/tutorials/cesium-and-webpack/

git 代码仓库地址：
https://gitee.com/lvye1221/cesium-webpack-exercise

启动

// 安装依赖
cnpm install

// 启动
npm run start

// 编译发布版本
npm run release

文件主要说明

1. package.json

主要节点说明：
devDependencies：开发过程中的相关依赖
scripts：执行的脚本

2. webpack.config.js

Cesium 在项目依赖项中的编译的配置参数：

output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),

    // Needed to compile multiline strings in Cesium
    sourcePrefix: ''
},
amd: {
    // Enable webpack-friendly use of require in Cesium
    toUrlUndefined: true
},
node: {
    // Resolve node module use of fs
    fs: 'empty'
},

快速过下，为什么这些配置选项需要配置。

output.sourcePrefix: ‘’ 因为某些版本的webpack默认会在输出的每一行的开始增加一个\t 字符。Cesium有很多多行字符串，所以我们需要使用空字符串 ''来覆盖这个选项。

amd.toUrlUndefined: true 告诉Cesium，webpack中计算 require声明的AMD 模块里的toUrl 函数和标准的不兼容。

node.fs: ‘empty’ 解决一些第三方库使用的fs 模块，它一般是用在NodeJS的环境里，而不能在浏览器环境里使用。

下来我们增加一个 cesium 别名（alias） ，我们就很容易的在项目里引用，就像一个传统的Node 模块。
————————————————
版权声明：本文为CSDN博主「Cesium实验室」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43805235/article/details/85162131

3. webpack.release.config.js

优化相关的参数：

遇到的问题及解决

ReferenceError: HtmlWebpackPlugin is not defined

在 webpack.config.js 文件中，配置时，没有添加 引入变量 导致的。

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

webpack4 Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead

生成大的优化文件：

optimization: {
    splitChunks: {
	    chunks (chunk) {
    		// exclude `my-excluded-chunk`
		    return chunk.name !== 'cesium';
	        }
        }
    },

app.js 4k
vendors~app.js 3M

---

这表明将选择哪些块进行优化。当提供一个字符串，有效值为all，async和initial。提供all可能特别强大，因为它意味着即使在异步和非异步块之间也可以共享块。

或者，您可以提供更多控制功能。返回值将指示是否包括每个块。

splitChunks.maxSize
Minimum size, in bytes, for a chunk to be generated

字节数目
100k = 100000

    optimization: {
        splitChunks: {
	    minChunks: 2,
	    maxSize: 100000,	    
	    chunks (chunk) {
		// exclude `my-excluded-chunk`
		return chunk.name !== 'cesium';
	    }
        }
    },

设置了 maxSize 后 将会拆分成 171 个子项目。

---

其他方法的尝试

    optimization: {
        splitChunks: {
	    minSize: 30000,
	    maxSize: 100000,
	    minChunks: 1,
	    chunks (chunk) {
		// exclude `my-excluded-chunk`
		return chunk.name !== 'cesium';
	    },
	    cacheGroups: {
		vendors: {
		    test: /[\\/]node_modules[\\/]/,
		    priority: -10
		},
		default: {
		    minChunks: 2,
		    priority: -20,
		    reuseExistingChunk: true
		}
	    }
        }
    },

将会拆分成 100 多个子项目

###【参考资料】

https://blog.csdn.net/github_36487770/article/details/80228147

使用代码分割，进行代码优化
https://webpack.js.org/guides/code-splitting/

SplitChunks cesium

Cesium官方教程13–Cesium和Webpack
https://blog.csdn.net/weixin_43805235/article/details/85162131

split-chunks-plugin 配置
https://webpack.js.org/plugins/split-chunks-plugin/#configuration

拆分建议
https://webpack.js.org/guides/code-splitting/#bundle-analysis

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

package.json

“release”: “node_modules/.bin/webpack --mode=production --config webpack.release.config.js”,

在编译的方式上，设置发布模式为 production

https://webpack.js.org/configuration/optimization/#optimizationminimize

查看设置的模式配置方法