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

一直使用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引用

将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配置，如：

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

    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 成功了

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

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