Leaflet 将传单与汇总一起使用会生成一个巨大的源地图_Leaflet_Rollupjs

Leaflet 将传单与汇总一起使用会生成一个巨大的源地图

leaflet

Leaflet 将传单与汇总一起使用会生成一个巨大的源地图,leaflet,rollupjs,Leaflet,Rollupjs,除了简单的“helloworld”案例之外，我目前正在通过使用rollup.js来提高自己的能力。我已经创建了一个汇总项目，其中我使用了babel、eslint和传单的组合。我的rollup.config.js如下所示： // plugins import babel from 'rollup-plugin-babel'; import eslint from 'rollup-plugin-eslint'; import resolve from 'rollup-plugin-node-res

除了简单的“helloworld”案例之外，我目前正在通过使用rollup.js来提高自己的能力。我已经创建了一个汇总项目，其中我使用了babel、eslint和传单的组合。我的rollup.config.js如下所示：

// plugins
import babel from 'rollup-plugin-babel';
import eslint from 'rollup-plugin-eslint';

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';



    export default{
        entry: 'src/scripts/main.js',
        dest: 'build/js/main.min.js',
        format: 'iife',
        sourcemap: 'inline',
        plugins: [
            resolve({
                jsnext: true,
                main: true,
                browser: true,
            }),
            commonjs(),
            eslint({
                exclude: [
                  'src/styles/**',
                ]
              }),
            babel({exclude:'node_modules/**', })
        ]
    };

接下来，my main.js由以下内容给出：

import L from 'leaflet';


var map = L.map('map').setView([54.217, -4.5373], 8);
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>'
}).addTo(map);

从“传单”导入L；
VarMap=L.map（'map'）.setView（[54.217，-4.5373]，8）；
L.tileLayer（'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'{
属性：'©；贡献者，©；'
}).addTo（地图）；

和my index.html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width,minimum-scale=1,initial-scale=1">
        <style>
            #map {
              width:600px;
              height:400px;
            }
          </style>
          <link href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" rel="stylesheet" type="text/css" />
  <title>Learning Rollup</title>
</head>
<body>
  <div id="map">
  </div>

  <!-- This is the bundle generated by rollup.js -->
  <script src="js/main.min.js"></script>

</body>
</html>


#地图{
宽度：600px；
高度：400px；
}
学习汇总

当我执行

rollup-c

时，我会得到一个巨大的1.4MB+

main.js.min

文件……如果我从

rollup.config.js

中删除

sourcemap:'inline'

，文件大小会下降到390KB。源映射分解生成的文件大小的原因是什么？树堆叠不是应该进一步减少生成的文件吗？

源映射几乎总是比它映射的代码大。因此，不建议使用

sourcemap:'inline'

，-改为使用

sourcemap:true

，它将被写入相邻的

.map

文件中，只有当有人在启用sourcemaps的情况下打开其开发工具时，才会下载该文件

这与树划无关。

源映射几乎总是大于它映射的代码。因此，不建议使用

sourcemap:'inline'

，-改为使用

sourcemap:true

，它将被写入相邻的

.map

文件中，只有当有人在启用sourcemaps的情况下打开其开发工具时，才会下载该文件

这与爬树无关