vue cli3 整合Cesium,处理build 时内存溢出问题

一直使用cesium，但是都是使用script直接引入的，但是在将其放置在增加路由的子页面中中时会出现一个问题，刷新后提示cesium is undefined看直接引入cesium.js<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><met...

奔跑的痕迹

3715人浏览 · 2020-05-02 07:01:23

奔跑的痕迹 · 2020-05-02 07:01:23 发布

一直使用cesium，但是都是使用script直接引入的，但是在将其放置在增加路由的子页面中中时会出现一个问题，刷新后提示cesium is undefined
看直接引入cesium.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="libs/Cesium/Widgets/widgets.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_1668594_l9pybqe35u.css">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="screen"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="libs/Cesium/Cesium.js"></script>
</body>
</html>

没刷新之前

刷新后提示错误

刷新后

。。。。。。。。

后来决定根据cesium官网来改进配置

一、安装ceium

  npm install --save-dev cesium

二、配置vue.config.js

1、在vue.config.js增加cesium目录映射

// The path to the CesiumJS source code
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';

2、配置别名

    chainWebpack: config => {
        config.resolve.alias
            .set("cesium", resolve(cesiumSource))
    },

3、使用WebpackPlugin拷贝cesium资源到dist

    configureWebpack: config => {
        const plugins = [];
        plugins.push(
            new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ])
        );
        plugins.push(
            new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ])
        );
        plugins.push(
            new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ])
        );
        plugins.push(
            new webpack.DefinePlugin({ CESIUM_BASE_URL: JSON.stringify('./') })
        );

        config.plugins = [...config.plugins, ...plugins];
    },

4、main.js引用

main.js引用

将Home.vue修改用于测试
Home.vue页面

最后vue.config.js配置是这样的

const path = require("path");
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin')
// The path to the CesiumJS source code
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
function resolve(dir) {
    return path.join(__dirname, dir)
}

module.exports = {
    
    publicPath: process.env.NODE_ENV === 'production'
        ? './'
        : '/',
    devServer: {
        port: 8099,
        disableHostCheck: true,
    },
    chainWebpack: config => {
        config.resolve.alias
            .set("cesium", resolve(cesiumSource))
    },
    configureWebpack: config => {
        const plugins = [];
        plugins.push(
            new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' } ])
        );
        plugins.push(
            new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets' } ])
        );
        plugins.push(
            new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' } ])
        );
        plugins.push(
            new webpack.DefinePlugin({ CESIUM_BASE_URL: JSON.stringify('./') })
        );

        config.plugins = [...config.plugins, ...plugins];
    },
}

5、运行测试


npm run serve

提示了几个错误

 WARNING  Compiled with 3 warnings                                                                              09:14:40

 warning  in ./src/main.js

"export 'default' (imported as 'Cesium') was not found in 'cesium/Cesium'

 warning  in ./node_modules/cesium/Source/Core/buildModuleUrl.js

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

 warning  in ./node_modules/cesium/Source/Core/buildModuleUrl.js

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

看第一个错误相信熟悉过node 或者commonJS都知道其实，Cesium.js没有 export default默认导出

三、错误处理

那么就将

import  Cesium from 'cesium/Cesium'

修改为

//  const Cesium  = require('cesium/Cesium') ； // 也可以改成require引入
import * as Cesium from 'cesium/Cesium'

好了目前只有两个错误了
控制台

看地图也加载出来了

但是还是有两个【错误】…

看到有朋友说要增加unknownContextCritical配置，如：
配置unknownContextCritical

于是我试着这样去修改配置

    chainWebpack: config => {
        config.module
            .unknownContextCritical(false)
            .end()
        config.resolve.alias
            .set("cesium", resolve(cesiumSource))
    },

但是运行是报错的


ERROR  TypeError: config.module.unknownContextCritical is not a function

看了半天vue 配置文档,最后将回调函数换成对象就OK了

这里就不啰嗦了，直接看最终的vue.config.js配置吧

const path = require("path");
const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin')
// The path to the CesiumJS source code
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
function resolve(dir) {
    return path.join(__dirname, dir)
}

module.exports = {

    publicPath: process.env.NODE_ENV === 'production'
        ? './'
        : '/',
    devServer: {
        port: 8099,
        disableHostCheck: true,
    },
    configureWebpack: {
        output: {
            sourcePrefix: ' '
        },
        amd: {
            toUrlUndefined: true
        },
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js',
                '@': path.resolve('src'),
                'cesium': path.resolve(__dirname, cesiumSource)
            }
        },
        plugins: [
            new CopyWebpackPlugin([ { from: path.join(cesiumSource, cesiumWorkers), to: 'Workers'}]),
            new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Assets'), to: 'Assets'}]),
            new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'Widgets'), to: 'Widgets'}]),
            new CopyWebpackPlugin([ { from: path.join(cesiumSource, 'ThirdParty/Workers'), to: 'ThirdParty/Workers'}]),
            new webpack.DefinePlugin({
                CESIUM_BASE_URL: JSON.stringify('./')
            })
        ],
        module: {
            unknownContextCritical: /^.\/.*$/,
            unknownContextCritical: false

        }
    }
}

控制台

四、deal with ‘JavaScript heap out of memory’ in vue build


> tf-pipe-gallery@0.1.0 build D:\YLKJPro\tf-pipe-gallery
> vue-cli-service build


\  Building for production...
<--- Last few GCs --->

[10780:000001C5544A9790]   232452 ms: Mark-sweep 1383.4 (1420.6) -> 1383.0 (1420.6) MB, 1387.6 / 0.0 ms  (average mu = 0.105, current mu = 0.017) allocation failure scavenge might not succeed
[10780:000001C5544A9790]   233690 ms: Mark-sweep 1383.7 (1420.6) -> 1383.3 (1421.1) MB, 1234.4 / 0.0 ms  (average mu = 0.057, current mu = 0.003) allocation failure scavenge might not succeed


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0000026F403D0461]
Security context: 0x01f699a9d971 <JSObject>
    1: /* anonymous */(aka /* anonymous */) [000002EFA8A9A541] [D:\YLKJPro\tf-pipe-gallery\node_modules\webpack-sources\lib\applySourceMap.js:~58] [pc=0000026F4126674D](this=0x03d26f9825b1 <undefined>,0x02080a98c961 <String[6]: Array(>,0x01b0a61506b9 <Object map = 000000E391A70FC1>)
    2: SourceNode_walk [0000036225A356F9] [D:\YLKJPro\tf-pipe-gallery\node...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

Writing Node.js report to file: report.20200402.161224.10780.001.json
Node.js report completed
 1: 00007FF6B7CCCC3A public: __cdecl v8::internal::GCIdleTimeHandler::GCIdleTimeHandler(void) __ptr64+4618
 2: 00007FF6B7C798B6 uv_loop_fork+80934
 3: 00007FF6B7C7A411 uv_loop_fork+83841
 4: 00007FF6B8070F1E void __cdecl v8::internal::FatalProcessOutOfMemory(class v8::internal::Isolate * __ptr64,char const * __ptr64)+798
 5: 00007FF6B8070E57 void __cdecl v8::internal::FatalProcessOutOfMemory(class v8::internal::Isolate * __ptr64,char const * __ptr64)+599
 6: 00007FF6B8120E74 public: static bool __cdecl v8::internal::Heap::RootIsImmortalImmovable(int)+14900
 7: 00007FF6B8116994 public: bool __cdecl v8::internal::Heap::CollectGarbage(enum v8::internal::AllocationSpace,enum v8::internal::GarbageCollectionReason,enum v8::GCCallbackFlags) __ptr64+7556
 8: 00007FF6B8115068 public: bool __cdecl v8::internal::Heap::CollectGarbage(enum v8::internal::AllocationSpace,enum v8::internal::GarbageCollectionReason,enum v8::GCCallbackFlags) __ptr64+1112
 9: 00007FF6B811EAB7 public: static bool __cdecl v8::internal::Heap::RootIsImmortalImmovable(int)+5751
10: 00007FF6B811EB36 public: static bool __cdecl v8::internal::Heap::RootIsImmortalImmovable(int)+5878
11: 00007FF6B82A78E1 public: class v8::internal::Handle<class v8::internal::HeapObject> __cdecl v8::internal::Factory::NewFillerObject(int,bool,enum v8::internal::AllocationSpace) __ptr64+49
12: 00007FF6B8360CEA public: static int __cdecl v8::internal::StoreBuffer::StoreBufferOverflow(class v8::internal::Isolate * __ptr64)+27082
13: 0000026F403D0461

看到这一片错误的确叫人头疼。。。

最后在vue 官网Issues终于找到了解决方法

直接修改package.json中的script


    "build": "node --max_old_space_size=4096 node_modules/@vue/cli-service/bin/vue-cli-service.js build --open"

再次npm run build 看见buil 成功了

build success

ok到此总算完美解决了所有问题。

感谢阅读，希望对于刚入门的cesium 开发者一些帮助，谢谢

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^