The problem that D3 quoted in requireJs

recently wanted to optimize the project, stepped on the d3 pit, the normal way of the reference would actually explode the problem of d3 is undefined.

过程

Normal reference method:

    require.config({
        paths: {
            "jquery": "../lib/js/jquery-1.11.1.min",
            "bootstrap": "../lib/js/bootstrap.min",
            "d3": "../lib/js/d3.v3.min",

            ...
d3 undefined Error 

After checking the document stackoverflow document link Need to create a global d3 variable

define(['d3'], function (d3) {
    //Use global d3
    console.log(d3);
});

OR

requirejs.config({
    shim: {
        d3: {
            exports: 'd3'
        }
    }
});

However this way does not solve the problem, still undefined. There is also a program that is not recommended in the document. However, after using it, I will not report an error. I am using this

conclusion

    require(['jquery', 'd3'], function ($, _d3) {
        d3 = _d3;
    });

. After the loading is completed, re-assign d3 to d3, although Not recommended, but it is a success. Let's take a look at it later.

requireJs How to use

1. In the page, refer to

<script type="text/javascript" src="../lib/js/require.js" data-main="../src/main"></script>
 to import the requireJs file normally, and specify the require entry file (configuration file) in the data-main

2. The reference to the js file that needs to be loaded asynchronously

require.config({
    baseUrl:"../lib/js/",  //Specify the root directory paths: {
        "jquery": "jquery-1.11.1.min",
        "bootstrap": "bootstrap.min",
        "d3": "d3.v3.min",
    }

    shim:{  //Load the non-canonical module 'bootstrap': {
            deps: ['jquery'],  //Load dependencyexports: "bootstrap"
        },
    }
})

3 . Callback function after loading is completed


    require(['jquery','d3', 'bootstrap'], function(){
        console.log("Load completed");
    });

Basically all configurations are like this

But there is a flaw. The require can only be loaded asynchronously on the js file, it will not block the file loading, it is convenient for code management, and it is convenient to view dependencies. But the file is not compressed, the degree of optimization is limited, so... my project does not have much performance improvement after use. If you want to optimize, you have to use webpack for compression and packaging.

参考文件: